Keep web sites readable on mobiles HD screens

As I was working on a new web project which mixed mobiles devices and PCs, I realized that it could be a problem to keep working in pixels to define page elements. Let's take an example :

Create a basic website not specific to mobile devices. Open it on a low resolution screen (such as a Samsung Galaxy Mini). Consider that the text is readable. Now, let's open the same page on a high resolution screen. Text will be too small.

What's the fuck???

By defaut, mobiles (and tablets) lie about their screen resolution

The first thing to know is that 1 pixel is 1 pixel on PCs (for the moment). On mobiles, 1 pixel = 1 "CSS pixel". Hey, what are "CSS pixels". It's easy to understand. Here are real screen resolutions :

  • 320x480px on iPhone 3
  • 640x960px on iPhone 4
  • 640x1136px on iPhone 5
  • 768x1024px on iPad 2
  • 1536x2048px on iPad 3

But, if you ask for the current resolution in javascript (screen.width), you will retrieve :

  • 320x480px on iPhone 3
  • 320x480px on iPhone 4
  • 320x568px on iPhone 5
  • 768x1024px on iPad 2
  • 768x1024px on iPad 3

You understand : that's how Apple handles Retina screens.

Okay, Okay... 320px, it's cool. But my Galaxy Mini has a lower width (240px)...

Don't worry : you can force mobiles to lie even more about their screen resolution

I'll show how your Galaxy Mini will emulate a 320px width screen.

I discovered this excellent blog post : http://sunpig.com/martin/archives/2012/03/18/goldilocks-and-the-three-device-pixel-ratios.html ; which introduced the meta"viewport". This meta tag allows mobile device a send a fake screen resolution in pixel. This resolution is made to keep screen readable. Behind the scene, the browser adapts the pixel/inch ratio automatically.

The solution is quite easy to implement. You just have to add this tag into your current "head" tag :


<meta name="viewport" content="width=device-width"> 


Don't be too happy, this "fake" resolution depends on the browser behind and the zoom factor (small, medium, large) selected by the user. But, it's simple.

So, what should you do ?

My opinion is to work with this meta tag and to consider that the user has the default zoom factor. I think it's the best compromise.

I can't conclude this post without giving you a link to this excellent post (sorry, it's in french) : http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html