I’m currently working on a mobile version of an existing website utilizing the Responsive Web Design paradigm. One problem I instantly came across was a perplexing page width issue on Android. Even with a blank, HTML5 webpage, the page width was appearing at almost twice the width of my phones native resolution (and 2.5x that of my browsers width). For the record, I’m using Android 2.3.3 vanilla with the default browser on a Nexus One.
Firstly an example:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' /> <script type='text/javascript'> $(document).ready(function() { document.body.innerHTML = $(window).width(); }); </script> </head> <body> </body> </html> |
The above code gives a blank, HTML5 webpage that will display the pages width on load. When loaded, it would print ‘800’ on the screen – indicating the page was set to an 800px width. This was clearly wrong.
I quickly noticed that using the following doctype:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> |
gave me the width I was expecting – 320px. Obviously this isn’t an acceptable solution for responsive web design and so another was needed. Meet viewports. With the addition of a simple META tag I was able to fix the issue (albeit losing the ability to zoom in the process). Simply add the following to your HEAD tag and you should be good to go:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" /> |
With this line added, my page now prints 320 to the screen as it should.
For more information, please see this StackOverflow post on the issue.