Mobile devices have a average screen resolution of about 320×480 (considerably smaller than most monitors), because of this they have a tendency to zoom out by default while browsing the web. While this is beneficial for viewing large websites, it can cause some issues when viewing a mobile website that has been optimized for 320×480.
What you’ll likely end up seeing is a 320×480 layout smashed in the corner of a large blank screen. This is because the mobile device was expecting to view a much larger website and has zoomed out in accordance. So how do you fix this?

The Solution:

The viewport meta tag. This handy little tag will lock a mobile device into viewing your website at it’s native resolution. Here is an example I took from – http://davidwalsh.name/zoom-mobile-browsers.

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0″/>

Once implemented, this code should prevent browsers from being able to zoom in/out while viewing your website. Problem solved.