Switching stylesheet on Mobile Site

Posted by bitterpill 2 years 49 weeks ago

bitterpill

mobiForge Newbie

Posts: 9

Joined: 2 years ago

[offline]

Hi all,

I'm looking for a way to do a function so users can increase, decrease or reset the font size, just like what Mobile NYTimes has

I've tried the normal ways of doing this on a PC browser such as switching stylesheets with JavaScript and PHP, but neither would work across all Mobile Browsers.. (old ones like on .mobi simulators don't support JS solution..) - I'm guessing NYTimes uses server-side to get it done but I haven't found a way to do it yet

I've tried a couple of methods of using PHP to switch stylesheet using Cookies or Sessions.. none seem to be working

Hope anyone here can take a look at this issue and provide me any useful advice and I'm quite baffled about this already

Posted by bitterpill 2 years ago

bitterpill

mobiForge Newbie

Posts: 9

Joined: 2 years ago

[offline]

I'm still trying looking for a method to get this done.. I've tried using JQuery and Cookies, it seems to work on my N80. However, client complained that on Blackberry it doesn't work. It didn't work on Opera Mini Simulator either..

The method NY Times is using works on most mobile devices that I've tried it on. I'm trying to figure out what method are they using.. can anybody take a look at the code below that I've extracted from NYTimes for their adjust font size solution and if you have any ideas, do let me know.

I'm kinda stuck now on what to research on

<!-- in the <head></head> -->
 
<link rel="stylesheet" href="/CSS;jsessionid=D97B830EC57A0F807D1A10E29BC1A2FB.w6?font=m" type="text/css" /> 
 
<!-- the markup -->
<div class="sp vp normalizeFont"> 
	<span class="grey"> Font Size: </span> 
	<span class="tSHP" style="font-size:7pt;"> <a href="/main?font=s">A</a></span> 
	<span class="tSHP" style="font-size:10pt;"> A </span> 
	<span class="tSHP" style="font-size:13pt;"> <a href="/main?font=l">A</a></span> 
	<br /> 
	<span class="aut hideFont" > Please turn stylesheet support on to change the font size.</span> 
</div>

Posted by catchytech 2 years ago

catchytech

mobiForge Newbie

Posts: 4

Joined: 3 years ago

[offline]

Hi
I guess that you have some button that when you click on it you want the server to change the stylesheet.
If you're using PHP then you have to check for $_POST if the button was clicked. If so then make <link rel="stylesheet" href="... point to other css in which the fonts will be bigger.
Comment here if you want more help, or post php code so I can take a look.
http://www.catchytech.com

Posted by bitterpill 2 years ago

bitterpill

mobiForge Newbie

Posts: 9

Joined: 2 years ago

[offline]

Hi catchytech, we're now using Server Side Script (very close to what you showed us) to switch the stylesheets to replace the JavaScript method, and I think this method would work better on all mobile browsers

However, the problem I'm having now is with the font-size property.. It's working on Opera Mini Simulator, I used 'em' as 'px' and '%' doesn't seem to work on Opera Mini..

Unfortunately, on Blackberry Bold, 'em' doesn't work either..

Can anyone light me the way of what are the correct ways to assign font-size to mobile browsers?

Posted by bitterpill 2 years ago

bitterpill

mobiForge Newbie

Posts: 9

Joined: 2 years ago

[offline]

Hmm blackberry needs a spanking.

Apparently, on BB, the switch function does not work. Our code is like this

Below is the code we used

    function getCssForFont($font_type)
    {
        switch((int) $font_type)
        {
            case 1:
                $css = 'decrease.css';
                break;
 
            case 3:
                $css = 'increase.css';
                break;
 
            default:
                break;
        }
 
        echo $css;
    }

This is how it switches the stylesheet

<link rel="stylesheet" href="<?= $utils->getCssForFont(strip_tags($utils->safe_input($_GET['font']))) ?>" type="text/css"/>

And finally, this is the HTML markup for users to pick a font-size

		<div class="head">
            Font-size: <a class="smaller-txt" href="<?= $font_url ?>font=1">A</a> |
            <a href="<?= $font_url ?>font=2">A</a> |
            <a class="bigger-txt" href="<?= $font_url ?>font=3">A</a>
        </div>

We also print/echo out the switched CSS at the top of the page, to debug whether the switch code works or not. Apparently, on BB, it is not displaying it.

I'm downloading BB Device Simulator now and hopefully is able to debug this issue. As now I'd have to depend on my client to debug on his BB Bold, and his response might not be accurate

Argh, this is causing me a big headache! LOL