How to restrict zoom of webpage to stretch when iPhone and Android in landscape orientation?

How to restrict zoom of webpage to stretch when iPhone and Android in landscape orientation?

When I rotate the iphone into landscape orientation, the header takes 30% space on the screen but in Portrait mode it only takes 15 %.

Will I have to write different css for some elements in landsca开发者_StackOverflowpe orientation?

You can use the viewport meta tag, as described by Mozilla. The Apple Documentation for developing web content for iPad describes this tag quite nicely too. Apple recommends:

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

EDIT:

In your case, you can try this:

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

You can try to use the technique mentioned here, to use different stylesheets for different orientations.

Try adding the webkit css

body {
    -webkit-text-size-adjust:none;
}

It basically stops the font size being adjusted when you go in to landscape.

Use with care, because if you let this css be read by a desktop safari client then it'll block any user zooming attempt from affecting font sizes.