SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mobile Browser Font CSS Issue

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,522
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    <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

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Another thing that sometimes stops random text resizing is to use either

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

    Code:
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •