Geek asks and answers

CSS HTML layout shrinks in iPad landscape mode?

I am making a layout for the iPad, and the width of the layout is 950 pixels, and when I switch to landscape mode, I do not get a horizontal scrollbar (which should actually be the same since the layout width is fixed in pixels, 950px not 786px) everything is fine but the header title height is reduced.

What am I doing wrong. I want my layout not to shrink in landscape mode. each element should have the same height as portrait mode.

+3
source share
4 answers

I suspect that the meta-crane viewportwill resize your site. Try to correct the scale to 1 at the initial, maximum minimum value.

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

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html

+4

, , , iOS, . . http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/

:

HTML:

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

JavaScript - . 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));
+1

webkit (Android/iOS) CSS , (). , . , .

<style>
body {
     -webkit-text-size-adjust: none;
}
</style>
0
<link rel="stylesheet" media="handheld" href="css/handheld.css?v=2">

-4
source

More articles:


All Articles