Tuesday, June 25, 2013

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

1 comment:

simashree said...

Thanks for the great information in your blog Selenium Training in Chennai

Download Oracle JDK from command line

Found on the web. You can adapt the url with one grabbed from Oracle JDK download page. What I love here is the fact is send Oracle licence ...