To place the below code on header session to the website
<meta name=”viewport” content=”width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no”>
The viewport meta tag was introduced by Apple for the iPhone, and it has since been picked up by Microsoft for Windows Mobile and Nokia for Maemo. The tag is ignored by regular desktop browsers.
<meta name=”viewport” content=”width=device-width” />
The above example essentially sets the zoom level to 100 percent. More specifically, it makes Safari scale content so that the number of visible pixels matches the screen width. This is useful for flexible layouts, but you’ll have to make sure your site flexes to both the iPhone and iPad (see step 2).
A little gotcha is that Safari always calculates device width based on the portrait orientation. If you rotate to landscape, the content is not reflowed, but scaled up to fit the wider screen.
<meta name=”viewport” content=”width=800″ />
You can also set the width to a specific number to fit content designed for that size. For example, a site designed to be 800 pixels wide can be scaled to show that exact width.