Adjusting mobile web font-sizes to fit screen resolutions

This might be obvious to someone less ignorant in the mystic ways of CSS, but I thought it was worth sharing anyway. 🙂

I was struggling to work out a suitable font-size for a mobile web page. Whether I tried using size names like “x-large”, or values with em, pt, px or %, the same basic problem remained:

CSS - not working

Font-sizes were either too small on smartphones with high-resolution screens, or too large on other smartphones.

If I increased the font-size to look better on a high-res screen, it was too big for other phones. If I decreased the font-size for those other phones, it looked tiny on a high-res screen.

I know that I could go the whole hog and use something like DeviceAtlas to generate a CSS file customised for the dimensions of the screen, but that is overkill for this quick, simple page I need to create.

I finally found the answer. Put this in the <head> :

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

With this, the page now looks like this:

CSS - working

It scales properly.

Hurrah. 🙂

Update (10-Aug): And it seems to work this way on the iPhone browser as well. (Thanks to Neil for checking!)

Tags: , ,

14 Responses to “Adjusting mobile web font-sizes to fit screen resolutions”

  1. Thanks for the tips. I’m in the middle of developing mobile version of my website and I’ll see if your tips works

  2. jon says:


    Thanks for the post and information. As a web designer I recently decided to start marketing a new service for mobile web design which I think will become a huge niche market. Can you share with us your final CSS? Which software simulators are you using fro debugging and any additional information?

    I really think this is service will be a specialty, do you agree?


  3. dale says:

    For simulators, I was just using the emulators from the Android SDK.

    Kind regards, D

  4. Jasper says:


    Thx for this post! It works 🙂


  5. Odul says:

    it’s not supported on symbian

  6. JOhnny says:

    Thank a lot. This issue have given me lots of problems during the deveopement of the mobile part of our website 🙂

  7. Is there a reason that you’ve included user-scalable=no in your meta tag? All this does is make it impossible for your readers to zoom in or out on your designs. Which, while that might seem good, makes it difficult for people who need the font larger to read it.

    All you should need to write in that meta tag is to get the font size to scale appropriately.

  8. dale says:

    Jennifer – Yes, you’re quite right, thanks.

    At the time I wrote this post, I didn’t really know why it worked, I copy-and-pasted it and it just did.

    I’ve since got my head around why this stuff does what it does – mainly after hearing a talk by Bruce Lawson on Mobile Optimisation for the web. In it, he went through the viewport tags and it finally kinda clicked for me.

  9. Pradeep says:


    Thanks a lot. I got a big solution using your idea.

  10. Renana says:

    great! it works 🙂

  11. Tyler Smith says:

    Thanks. That was a great quick fix and a succinct writeup which made it all the better.

  12. thank you so much! I now have a mobile site that works!

  13. ahmetKacar says:

    Thats great, it helped so much! thanks a lot…

  14. Chris says:

    Woo hoo! Thanks, man. I spend forever on this. For the record, this works on Windows Phone 7, too. Huzzah!