Mobile Browser Font CSS Issue

HTML & CSS
1

Hi all,

In desparate need of a solution!

Am developing a responsive site and it scales fine on an Android mobile running Chrome.

However on a similar Android tablet running Chrome, the font-size can jump on certain elements for an unknown reason.

Meta:
<meta content=“width=device-width; height=device-height; initial-scale=1.0; maximum-scale=0.1; user-scalable=0;” name=“viewport”>

body { font-size: 10pt }

and the page follows the 10pt rule, but lower on on the page a paragraph tag jumps up in font-size (looks at least 12pt). Same with a list lower on in the page.

Seems to work fine on stock Android browser, just Chrome playing up?

Really not sure what it is, but am thinking it could be the browser scaling certain elements?

Works perfectly on desktop?

Any solutions/ideas would be most appreciated!

2

Hi,

What does “maximum-scale=0.1;” actually do as I haven’t seen anyone else use it? Its usually 1.0.

It’s not a good idea to set a maximum scale like that anyway or use “user-scalable=0;” as that stops the users ability to zoom and is not recommended as most mobile users will want to pinch and zoom.

Yoor format is invalid anyway as it should be a comma separated list (not semi colons) and that could possibly cause the rules to be ignored.


<meta content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

Using pts for text sizing is not recommended either as pts are mainly for print. Use ems, % instead (or pixels if you have to).

Im not sure any of that will help with your issue though but its worth a try :slight_smile:

3

Another thing that sometimes stops random text resizing is to use either

body {-webkit-text-size-adjust: none;}

or

body {-webkit-text-size-adjust:100%;}

The 100% option is better in terms of desktop browsers like Safari, but I find none more reliable, and I only serve it up to small screens with @media rules.