我有一个添加到"viewport"元标记"width=device-width,initial-scale=1.0"和在iPad的页面加载到精细在风景模式中，它很好地切换到肖像，当我旋转它回景观是缩放页面了，我不得不掐放大它回到1倍的比例。
我可以通过添加解决这个"maximum-scale=1.0, user-scalable=no" ，但我想知道如果有一个办法可以解决这个问题而不采取远离用户在页面缩放的能力。
如果您有任何建议，我很想听到他们的声音，
谢谢！
Answer 1:
------更新------
这是不是一个问题了在iOS7。 还有在GitHub上更好的修复由Scott Jehl scottjehl / IOS的Orientationchange，修复 ，对iOS6的工作。
------原来的答复------
杰里米·基思（ @adactio ）有这个在他的博客很好的解决方向和比例
保持可扩展标记
<meta name="viewport" content="width=device-width, initial-scale=1">
然后，禁用了JavaScript的可扩展性，直到这个脚本gesturestart：
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);
}
}
Answer 2:
斯科特Jehl想出了使用加速计预料的方向变化的梦幻般的解决方案。 该解决方案是非常敏感和不缩放手势干扰。
https://github.com/scottjehl/iOS-Orientationchange-Fix
工作原理：此修复程序的工作原理是听设备的加速度计来预测何时取向的变化即将发生。 当它认为一个方向改变迫在眉睫，脚本禁止用户缩放，允许适当的发生方向变化，变焦禁用。 该脚本再次恢复变焦一旦设备是面向接近直立，或它的定位之后发生了变化。 通过这种方式，而页面中使用的用户缩放永远不会被禁用。
精缩来源：
/*! 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(c.x);i=Math.abs(c.y);h=Math.abs(c.z);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);
Answer 3:
我们希望，这将有助于...
<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>
Answer 4:
通过jQuery Mobile的使用的解决办法是在这里
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(l.x), j = Math.abs(l.y), k = Math.abs(l.z), (!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 );
Answer 5:
这似乎是在iOS 4的一个错误，这可以用下面的JavaScript片段来弥补，但它禁用用户做捏到变焦能力：
https://gist.github.com/901295/229d163414e22ebb14a6a6ba0b9777118f02e52d
Answer 6:
这一次的作品！
<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>
Answer 7:
为了使脚本工作，绕过第二手势一些小的调整就像orienatation改变事件的最大设置为1.00099，而不是仅仅1.0
Answer 8:
我想出了不同的解决方案，以保持在变焦1上旋转，但允许用户捏到变焦。 基本上，当用户放大，JavaScript的改变视口缩放级别（和本机浏览器缩放功能被禁用）。
看到这里： https://stackoverflow.com/a/11878932/436776
Answer 9:
第一次修正为我工作有以下改动。
初始规模更改为2.8，最低.25和最高至1.6。
使用“元”标签
<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);
}
}
Answer 10:
当你说这缩放页面时，是所有元素，或者只是文本字体大小......为了固定，你可以使用的字体大小？
html {
-webkit-text-size-adjust: 100%;
}
Answer 11:
到元：
%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
文章来源: iPad layout scales up when rotating from portrait to landscape
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://img.manongdao.com/sparkler-677774__340.jpg', '推荐 我欲成王，谁敢阻挡 的文章《iPad layout scales up when rotating from portrait 》','https://www.manongdao.com/article-832330.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}