Those who attempt building mobile optimized web pages the first time might be surprised when the device browser decides to go scale crazy.
Mobile browsers require mobile specific meta information which tells them how to render and scale the page. Developers can also set Min and Max scale values, or disable user scaling completely.
Continue reading to learn more.

The iPhone4 resolution is 640×960. So your CSS wrapping div should have a width of 640px, and if you are avoiding a vertical scroll, a height of 830px (to cater for mobile Safari’s toolbars).


#wrapper
{
	width:640px;
	height:830px;
	background-image:url(../images/splash/knowYourPainBG.jpg);
	overflow: hidden;
	margin: auto auto ;
	margin-top:0px;
}

So why is it that when we build a page to this spec we see something like this?

 

viewing the page on an androids chrome browser will have the same effect.

Mobile website require mobile specific meta tags to know how to render the page correctly

Put the following lines of code between your opening and closing ‘head’ tags

  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="640">
  <meta name="viewport" content="width=640px">

You can also control how the user can scale the page, and even restrict them from doing so, however this is not recommended in most cases. 

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2, user-scalable=yes"> 

The attributes are pretty self explanatory, change the values and experiment until it looks perfect on all your targeted devices.