HTML CSS layout is shrinking in iPad landscape mode?

I'm making a layout for iPad and width of layout is 950px and when I go into landscape mode I'm not getting any horizontal scroll bar ( which actually I should have because layout's width is fixed in pixel which 950px not 786px) all is fine but top title bar's height is shrinking.

What I'm doing wrong. I want my layout should not be shrinking in landscape mode. each e开发者_高级运维lement should have same height like portrait mode.

I suspect the viewport meta tap to resize your site. Try to fix the scale to 1 in the initial, maximum in minimum values.

<meta name="viewport" content="width=950, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

I don't know if this is what is happening for you, but there is a bug on iOS whereby the scale changes when switching between portrait and landscape mode. See http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/

You can fix it as follows:

Add this meta tag to the HTML document's head:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

And add this JavaScript to the page - see https://gist.github.com/90129

(function(doc) {

var addEvent = 'addEventListener',
    type = 'gesturestart',
    qsa = 'querySelectorAll',
    scales = [1, 1],
    meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];

function fix() {
    meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
    doc.removeEventListener(type, fix, true);
}

if ((meta = meta[meta.length - 1]) && addEvent in doc) {
    fix();
    scales = [.25, 1.6];
    doc[addEvent](type, fix, true);
}

}(document));

On webkit devices (Android/iOS) you can use this CSS on the body to prevent text from resizing after an orientation change (rotation). It took me a while to track it down. Hope it helps others with this odd feature.

<style>
body {
     -webkit-text-size-adjust: none;
}
</style>

<link rel="stylesheet" media="handheld" href="css/handheld.css?v=2">

This can be also helpful