Skip to main content

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

Comments

simashree said…
Thanks for the great information in your blog Selenium Training in Chennai

Popular posts from this blog

DCcduino usb drivers (CH340 / CH341 chipset)

I've just received my first arduino platform. It's a DCcduino board (a clone of Arduino Uno). As I had some difficulties to have it recognised by my MacBook, I decided to share its drivers. This card has a CH340 USB-to-serial chip. You can find drivers for this chip on the web site of the chinese manufacturer, here :

http://www.wch.cn/downloads.php?name=pro&proid=5

Or download it directly from my Google Drive. The archive contains drivers for Mac, Linux and Windows platforms.

https://drive.google.com/file/d/0B5okZr5AW4gaX2pZaWt6dVNaSFU/edit?usp=sharing

I hope this will help somebody.

UPDATE for Mac users with Yosemite :

Please, follow this extra instructions :
Install the CH340 driverRun the command in Terminal: sudo nvram boot-args="kext-dev-mode=1"Reboot

The great alternative to JRebel

I'm an old user and addict of JRebel. I started to use it on open source projects and in professional contexts. From the beginning, I've been convinced that the licensing mode was wrong because of its lifetime. Asking for license renewal each year is boring. So, I decided to look for FREE alternative solutions and finally I recently found one.

This solution is efficient for maven projects developed with Eclipse. It is base on :

Hotswap Agent project : http://hotswapagent.org/Dynamic Source Lookup plugin for Eclipse : https://github.com/ifedorenko/com.ifedorenko.m2e.sourcelookup
I tested it with Java 7 & Java 8. I work on web applications that run on Tomcat. I developed wih Spring (IoC), sometimes Hibernate and Vaadin



Hotswap Agent installation consists on the deployment of a patch for your JVM. You just have to download the corresponding patch here : https://github.com/dcevm/dcevm/releases Then, download the hotswap-agent.jar from here : https://github.com/HotswapProjects…

How to secure REST services exposed with Jersey (JAX-RS) using Spring Security

This is the challenge I had to perform. I have to open services to business partners and I want to secure them. I use a Java based application with Jersey API (JAX-RS).

The first thing to consider is : what kind of solution offers the best compromise between security and the effort I'll have to provide to maintain this solution?
After some discussions with developers and experts, the conclusion is : expose your services over https and use Basic authentication (Digest authentication and certificate based authentication are too complex for partners)

So, how to implement that? I delegate "https" to my Apache http servers. But I still need to handle authentication (and authorization of course). After long hours on Google, I understood that it is possible to manage security with Jersey by many many ways. Here is a short list :

Delegate simple authentication and authorization to your container (Tomcat) or to your frontend (Apache)Delegate authentication to your container or fro…