移动 safari：设备旋转导致网站缩放不良答案

【问题标题】：mobile safari: device rotation causes bad scaling of website移动 safari：设备旋转导致网站缩放不良
【发布时间】：2011-07-03 11:16:24
【问题描述】：

我有一个适用于 iphone 和 ipad 的移动网站，我在其中禁用用户缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

只要网站处于横向模式，它就可以正常工作。网站的宽度正好是屏幕的宽度。然后，如果我将设备旋转到纵向模式，它会按比例缩小，以适应新的（更短的）宽度。这也可以。

但是如果我将它旋转回横向模式，它会突然缩放到大约 125%，这意味着现在可以进行水平滚动，并且由于最初被禁用，因此无法进行缩放。

当旋转回到横向时，我怎样才能让它回到 100% 缩放？

谢谢！

【问题讨论】：

标签： ipad mobile-safari zooming

【解决方案1】：

尝试像这样尝试最大比例和最小比例

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0" />

看看你能不能达到你想要的..

【讨论】：

我刚刚进行了一些基本测试，以下为我创造了奇迹：<meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0">
这是一个很好的解决方法，我认为这是移动 safari 中的一个错误。 clamp 的原始元标记是我通常设置网站的方式。我怀疑 safari 中的 DOM 中的某些内容在某些网站中的行为与预期不符，从而导致最终导致此问题的页面宽度混乱。

【解决方案2】：

禁用缩放是个坏主意。这不是一个完美的解决方案，但针对 webkit 在方向更改时缩放字体大小可以帮助最大限度地减少问题。你会留下文件的头部：

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

然后，您将在 CSS 中解决字体大小缩放问题，如下所示：

body {
    font-size: 1.5rem;
    line-height: 2.3rem;
    -webkit-text-size-adjust: 100%;
}
/* This prevents mobile Safari from freely adjusting font-size */**

【讨论】：

【解决方案3】：

使用maximum-scale 和minimum-scale 来停止缩放并不能真正起作用，因为这样会剥夺用户缩放的能力。这真是个坏主意，因为它会让眼睛不好的用户对您的网站不缩放而生气，而其他网站却...

我尝试了超时和各种花哨的 javascript，然后我发现了这个： https://github.com/scottjehl/iOS-Orientationchange-Fix

在那篇帖子中，Andrew Ashbacher 发布了一个指向 Scott Jehl 编写的代码的链接：

/*! 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);

这是一个很好地包含在 IIFE 中的解决方案，因此您不必担心名称空间问题。

只需将其放入您的脚本（如果您使用 jQuery，则不要放入 document.ready()）和中提琴！

它所做的只是禁用devicemotion 事件的缩放，这些事件表明orientationchange 即将发生。这是我见过的最好的解决方案，因为它确实有效并且不会禁用缩放。

编辑：这种方法并不总是可靠的，尤其是当您以一定角度握住 ipad 时。另外，我认为这个活动不适用于第 1 代 ipad

【讨论】：