Why do new HTML5-designed Web sites look bad on different smartphones?

Let’s suppose you design and develop a new Web site application using only HTML5. You managed to set in all your page documents, and they do look beautiful. Layout is controlled by CSS, and everything is smooth. The user interface is consistent across browsers during all your tests performed on your notebook or workstation. Including when you manually resize the window horizontally, to simulate a mobile device with lower resolution.

However, once you deploy the Web site on a test server and check the result on your mobile phone – disaster! Everything looks small and you need to zoom in to read anything. But you know you’ve designed the site to work well on small devices too! What’s wrong!?

Unaware of the actual issue, you might start adding @media only screen filters in your CSS and make everything relatively larger when they are run on screens with lower resolutions. It becomes to work better on your phone and eventually you think you’re done.

But then – another disaster – when you run the Web site again from your friend’s phone using a different operating system and browser, you notice that some things look different! Some texts appear a lot larger or smaller than expected, while on your phone they look just fine. It seems that the issues that different desktop browsers had before standardization have now moved to different phone browsers! Have them?! Yes and no. Here comes the explanation.

When smartphones reached the markets, several years ago, all important Web sites were constructed to look fine on large screens. Such as 1024 or 980 device units wide. And apparently phone manufacturers decided that the mobile browsers should just assume by default that a Web site is of that type. So they load the content of the Web site in a wide viewport in memory and present it with a zoom factor on screen so that it fits the actual screen resolution. I think the way browsers perform this internal viewport zooming is not (yet) standardized, and basically, this is why the differences occur!

Fortunately, manufacturers seem to have agreed, though, to support a new meta tag for newer Web sites – i.e. those designed for all types of screen resolutions, like the one you worked on! It’s simple: just add it to the head of the document:

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

With this in place, your site now looks a lot better and consistent on all phones, without the media filters. Hooray! (Of course, you can still add filters and hide or modify things when pages are loaded on small screens but you’ve overcome the core issue presented above.)

Update: As this article indicates, it seems that the initial-scale=1 setting is important too!

<meta name="viewport" content="width=device-width, initial-scale=1">

I wish this information was among the first in HTML5 tutorials!


About Sorin Dolha

My passion is software development, but I also like physics.
This entry was posted in HTML5. Bookmark the permalink.

Add a reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s