iphone竖屏显示问题

down vote accepted

Jeremy Keith (@adactio) has a good solution for this on his blog Orientation and scale

Keep the Markup scalable by not setting a maximum-scale in markup.

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

Then disable scalability with javascript on load until gesturestart when you allow scalability again with this script:

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
        document.body.addEventListener('gesturestart', function () {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}

share|improve this answer

answered Jun 16 '11 at 22:39 snobojohan 1,3641310

3	Surely this is better than disabling zoom?! The best fix I've found yet :) – danwellman Sep 23 '11 at 13:58
	this worked for me too. thanks! – 29er Oct 31 '11 at 4:30
	Hmm, this still disables the ability to zoom. Does anyone have a simple solution that doesn't do this? – Brad Swerdfeger Feb 20 '12 at 7:00
3	It works. However, I've noticed the user has to pinch open twice in order to zoom. I'm guessing this is because the maximum-scale=1.0 stays in effect after the gesture starts. Is there any way to fix this? – LandonSchropp May 6 '12 at 22:56
2	This doesn't work for 2 reasons: 1) it disables gesturestart number 1, causing the user to need to gesture twice. 2) it breaks after the user doubles the first gesture, so it really only works if the user never gestures at all. -- everyone should look at Andrew Ashbacher's solution below. It really works. – tmsimont Jun 1 '12 at 21:53