从纵向到横向旋转时，iPad的布局会扩大
我有一个添加到"viewport"元标记"width=device-width,initial-scale=1.0"和在iPad的页面加载罚款横向模式，它很好地切换到肖像，当我把它旋转回风景它缩放页面，我不得不捏缩放到1规模。
我可以通过添加"maximum-scale=1.0, user-scalable=no"来解决这个问题，但是我想知道是否有一种方法可以解决这个问题，而不需要从用户那里放大页面的能力。
如果您有任何build议，我很乐意听到他们，
谢谢！
——更新——
这在iOS7中不再是个问题。 Scott Jehl在github上有更好的解决schemescottjehl / iOS-Orientationchange-Fix适用于iOS6。
——原创答案——
Jeremy Keith（ @adactio ）在他的博客定位和规模上有一个很好的解决scheme
保持标记可扩展
<meta name="viewport" content="width=device-width, initial-scale=1">
然后禁用JavaScript的可伸缩性，直到与此脚本的姿态开始 ：
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); } }
斯科特Jehl提出了一个奇妙的解决scheme，使用加速度计来预测方向的变化。 该解决scheme非常灵敏，不会干扰缩放手势。
https://github.com/scottjehl/iOS-Orientationchange-Fix
工作原理：这个解决scheme通过收听设备的加速度计来预测方位变化即将发生的时间。 当它认为方向改变即将发生时，该脚本禁用用户缩放，允许方向改变正确发生，禁用缩放。 一旦设备的方向接近直立，或者方向改变后，脚本就会恢复缩放。 这样，用户缩放从不被禁用，而页面正在使用。
精简来源：
/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT License.*/(function(m){if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&navigator.userAgent.indexOf("AppleWebKit")>-1)){return}var l=m.document;if(!l.querySelector){return}var n=l.querySelector("meta[name=viewport]"),a=n&&n.getAttribute("content"),k=a+",maximum-scale=1",d=a+",maximum-scale=10",g=true,j,i,h,c;if(!n){return}function f(){n.setAttribute("content",d);g=true}function b(){n.setAttribute("content",k);g=false}function e(o){c=o.accelerationIncludingGravity;j=Math.abs(cx);i=Math.abs(cy);h=Math.abs(cz);if(!m.orientation&&(j>7||((h>6&&i<8||h<8&&i>6)&&j>5))){if(g){b()}}else{if(!g){f()}}}m.addEventListener("orientationchange",f,false);m.addEventListener("devicemotion",e,false)})(this);
希望这将有助于…
<head> <style type="text/css"> <!-- /* I began with the goal to prevent font scaling in Landscape orientation. To do this, see: http://stackoverflow.com/questions/2710764/ Later, I just wanted to magnify font-size for the iPad, leaving the iPhone rendering to the css code. So ... (max-device-width:480px) = iphone.css (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait) = ipad-portrait.css (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape) = ipad-landscape.css (min-device-width:1025px) = ipad-landscape.css */ @media only screen and (min-device-width: 481px) { html { -webkit-text-size-adjust: 140%; /* none for no scaling */ } } --> </style> </head>
jQuery手机使用的修复程序在这里
https://github.com/scottjehl/iOS-Orientationchange-Fix
精缩
/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT / GPLv2 License.*/(function (a) { function m() { d.setAttribute("content", g), h = !0 } function n() { d.setAttribute("content", f), h = !1 } function o(b) { l = b.accelerationIncludingGravity, i = Math.abs(lx), j = Math.abs(ly), k = Math.abs(lz), (!a.orientation || a.orientation === 180) && (i > 7 || (k > 6 && j < 8 || k < 8 && j > 6) && i > 5) ? h && n() : h || m() } var b = navigator.userAgent; if (!(/iPhone|iPad|iPod/.test(navigator.platform) && /OS [1-5]_[0-9_]* like Mac OS X/i.test(b) && b.indexOf("AppleWebKit") > -1)) return; var c = a.document; if (!c.querySelector) return; var d = c.querySelector("meta[name=viewport]"), e = d && d.getAttribute("content"), f = e + ",maximum-scale=1", g = e + ",maximum-scale=10", h = !0, i, j, k, l; if (!d) return; a.addEventListener("orientationchange", m, !1), a.addEventListener("devicemotion", o, !1) })(this);
完整的来源
/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto. MIT / GPLv2 License. */ (function(w){ // This fix addresses an iOS bug, so return early if the UA claims it's something else. var ua = navigator.userAgent; if( !( /iPhone|iPad|iPod/.test( navigator.platform ) && /OS [1-5]_[0-9_]* like Mac OS X/i.test(ua) && ua.indexOf( "AppleWebKit" ) > -1 ) ){ return; } var doc = w.document; if( !doc.querySelector ){ return; } var meta = doc.querySelector( "meta[name=viewport]" ), initialContent = meta && meta.getAttribute( "content" ), disabledZoom = initialContent + ",maximum-scale=1", enabledZoom = initialContent + ",maximum-scale=10", enabled = true, x, y, z, aig; if( !meta ){ return; } function restoreZoom(){ meta.setAttribute( "content", enabledZoom ); enabled = true; } function disableZoom(){ meta.setAttribute( "content", disabledZoom ); enabled = false; } function checkTilt( e ){ aig = e.accelerationIncludingGravity; x = Math.abs( aig.x ); y = Math.abs( aig.y ); z = Math.abs( aig.z ); // If portrait orientation and in one of the danger zones if( (!w.orientation || w.orientation === 180) && ( x > 7 || ( ( z > 6 && y < 8 || z < 8 && y > 6 ) && x > 5 ) ) ){ if( enabled ){ disableZoom(); } } else if( !enabled ){ restoreZoom(); } } w.addEventListener( "orientationchange", restoreZoom, false ); w.addEventListener( "devicemotion", checkTilt, false ); })( this );
这似乎是iOS 4中的一个错误，可以通过下面的JavaScript代码来补救，但是它禁用了用户执行捏合缩放的能力：
https://gist.github.com/901295/229d163414e22ebb14a6a6ba0b9777118f02e52d
这个工作！
<script > // BUG orientation portrait/lanscape IOS // 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.addEventListener('orientationchange', function () { viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1'; }, false); } } </script>
为了脚本的工作和绕过第二个手势小调整像在orienatation改变事件设置最大值为1.00099而不是1.0
当你说它缩小了页面，是所有的元素，还是只是文本的字体大小？…为了解决您可以使用的字体大小：
html {-webkit-text-size-adjust：100％; }
我想出了一个不同的解决scheme，以保持旋转放大1，但允许用户捏缩放。 基本上当用户放大时，javascript会改变视口缩放级别（并且禁用原生浏览器缩放function）。
在这里看到： https : //stackoverflow.com/a/11878932/436776
第一个修复程序为我工作了以下更改。
将初始缩放比例更改为.8，最小值为.25，最大值为1.6。
使用“meta”标签
<meta name="viewport" content="width=device-width, initial-scale=1"> <script ="text/javascript"> 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=.25, maximum-scale=1.6, initial-scale=.8'; document.body.addEventListener('gesturestart', function () { viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6'; }, false); } }
meta：
%meta{content: "width=device-width, initial-scale=1.0, minimum-scale=0.25, maximum-scale=1.6, user-scalable=yes", name: "viewport"}
全球脚本：
if navigator.platform.toLowerCase() is "ipad" viewport = $ "meta[name='viewport']" viewport_content = viewport.attr("content") # reset initial zoom viewport.attr "content", "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes" setTimeout => viewport.attr "content", viewport_content , 0 # reset zoom on rotate timeout = null window.onorientationchange = -> clearTimeout timeout if timeout? viewport.attr "content", "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes" timeout = setTimeout => viewport.attr "content", viewport_content , 1000
