Html 从纵向旋转到横向时 iPad 布局会放大
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5434656/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iPad layout scales up when rotating from portrait to landscape
提问by Victor Ionescu
I have a added to the "viewport"meta tag "width=device-width,initial-scale=1.0"and on an iPad the page loads up fine in landscape mode, the it switches nicely to portrait and when I rotate it back to landscape it scales the page up and I have to pinch zoom it back to a 1 scale.
我添加了一个"viewport"元标记"width=device-width,initial-scale=1.0"，在 iPad 上，页面在横向模式下加载得很好，它可以很好地切换到纵向，当我将它旋转回横向时，它会放大页面，我必须捏缩放回1 刻度。
I can fix this by adding the "maximum-scale=1.0, user-scalable=no", but I was wondering if there is a way I could fix this without taking away from the user the ability to zoom in the page.
我可以通过添加 来解决这个问题"maximum-scale=1.0, user-scalable=no"，但我想知道是否有一种方法可以解决这个问题，而不会剥夺用户放大页面的能力。
If you have any suggestions I would love to hear them,
Thanks!
如果您有任何建议，我很想听听他们，
谢谢！
回答by snobojohan
------ Update ------
- - - 更新 - - -
This is not an issue anymore in iOS7. And there is better fix by Scott Jehl on github scottjehl/iOS-Orientationchange-Fixthat works for iOS6.
这在 iOS7 中不再是问题。Scott Jehl 在适用于 iOS6 的github scottjehl/iOS-Orientationchange-Fix上有更好的修复。
------ Original answer ------
------ 原答案------
Jeremy Keith (@adactio) has a good solution for this on his blog Orientation and scale
Jeremy Keith ( @adactio) 在他的博客Orientation and scale上有一个很好的解决方案
Keep the Markup scalable
保持标记可扩展
<meta name="viewport" content="width=device-width, initial-scale=1">
Then disable scalability with javascript until gesturestartwith this script:
然后使用 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);
}
}
回答by Andrew Ashbacher
Scott Jehlcame up with a fantastic solution that uses the accelerometer to anticipate orientation changes. This solution is very responsive and does not interfere with zoom gestures.
Scott Jehl提出了一个奇妙的解决方案，它使用加速度计来预测方向变化。此解决方案响应迅速且不会干扰缩放手势。
https://github.com/scottjehl/iOS-Orientationchange-Fix
https://github.com/scottjehl/iOS-Orientationchange-Fix
How it works: This fix works by listening to the device's accelerometer to predict when an orientation change is about to occur. When it deems an orientation change imminent, the script disables user zooming, allowing the orientation change to occur properly, with zooming disabled. The script restores zoom again once the device is either oriented close to upright, or after its orientation has changed. This way, user zooming is never disabled while the page is in use.
工作原理：此修复程序通过侦听设备的加速度计来预测即将发生方向变化的时间。当它认为即将发生方向更改时，脚本会禁用用户缩放，允许正确发生方向更改，同时禁用缩放。一旦设备的方向接近直立，或者在其方向发生变化后，脚本将再次恢复缩放。这样，当页面正在使用时，用户缩放永远不会被禁用。
Minified source:
缩小的来源：
/*! 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);
回答by Andrew Ashbacher
Hopefully, this will help ...
希望这会有所帮助...
<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>
回答by Tom
The fix used by jQuery mobile is here
jQuery mobile 使用的修复程序在这里
https://github.com/scottjehl/iOS-Orientationchange-Fix
https://github.com/scottjehl/iOS-Orientationchange-Fix
Minified
缩小版
/*! 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);
Full source
完整来源
/*! 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 );
回答by Moiz
In order for the script to work and bypass the 2nd gesture minor tweaking like in orienatation change event set the max to 1.00099 instead of just 1.0
为了使脚本正常工作并绕过第二个手势小调整，例如在方向更改事件中将最大值设置为 1.00099 而不是 1.0
回答by LaureEtLaurent
This one works !
这个有效！
<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>
回答by Phil
This seems to be a bug in iOS 4 which can be remedied with the following Javascript snippet, however it disables the user's ability to do pinch-to-zoom:
这似乎是 iOS 4 中的一个错误，可以使用以下 Javascript 代码段进行修复，但是它禁用了用户进行双指缩放的能力：
https://gist.github.com/901295/229d163414e22ebb14a6a6ba0b9777118f02e52d
https://gist.github.com/901295/229d163414e22ebb14a6a6ba0b9777118f02e52d
回答by DShultz
When you say it scales the page up, is that all elements, or just the text font size?... For fixing the font size you can use:
当你说它放大页面时，是所有元素，还是只是文本字体大小？...要固定字体大小，您可以使用：
html {
-webkit-text-size-adjust: 100%;
}
回答by robocat
I came up with a different solution to keep the zoom at 1 on rotation, but allow the user to pinch-to-zoom. Basically when the user zooms, javascript changes the viewport zoom level (and the native browser zoom functionality is disabled).
我想出了一个不同的解决方案，在旋转时将缩放保持在 1，但允许用户捏合缩放。基本上当用户缩放时，javascript 会更改视口缩放级别（并且本机浏览器缩放功能被禁用）。
See it here: https://stackoverflow.com/a/11878932/436776
回答by Gregory Noll
The first fix worked for me with the following changes.
第一个修复对我有用，并进行了以下更改。
Change initial scale to .8, minimum to .25 and maximum to 1.6.
将初始比例更改为 .8，最小值为 0.25，最大值为 1.6。
Use the "meta" tag
使用“元”标签
<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);
}
}
