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

我有一个iphone和ipad的移动网站，在那里我禁用用户缩放

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

只要场地处于景观模式，这种方法就可以正常工作。网站的宽度正好是屏幕的宽度。 然后，如果我将设备旋转到纵向模式，它会缩小，以适应新的（较短的）宽度。这也可以

但如果我将它旋转回横向模式，它会突然缩放到125%左右，这意味着水平滚动现在是可能的，缩放是不可能的，因为最初禁用了

当旋转回横向时，如何使其回到100%缩放

---

谢谢

试着用最大刻度和最小刻度进行试验，就像这样

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

---

然后看看你是否能达到你想要的效果。

使用

最大比例

和

最小比例

停止缩放实际上不起作用，因为这样你就剥夺了用户的缩放能力。这真的是个坏主意，因为它会让你的用户因为你的网站没有缩放而生气，而其他网站却这样做了

我尝试了超时和各种花式javascript，然后发现：

通过这个相关问题：

在那篇帖子上，安德鲁·阿什巴赫（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);

/*！iOS方向更改缩放错误的修复程序。脚本由@scottjehl编写，反弹由@wilto.MIT License.*/（函数（m）{if（！（/iPhone | iPad | iPod/.test（navigator.platform）和&navigator.userAgent.indexOf（“AppleWebKit”）>-1）{return var l=m.document；if（！l.querySelector）{ret var n=l.querySelector（“meta[name=viewport]”，a=n&&n.getAttribute（“content”），k=a+“，最大刻度=1”，d=a+”，最大刻度=10”“内容”，d；g=真的）函数b（）{{函数b（）{函数b（）{函数b（）{函数b（）{函数b（）{n.Set属性（内容），d；g=真的）函数b（）{{n.Set属性（内容），k；g=假}函数e（o）函数e（o）函数e（o）函数e（o）函数e（o）函数e（o）函数（o）e（o）（c）（c）（c）（c）（c）（c）（c）（c）（c）（i）（c）（c）（c）（c）（c）（c）（c）（c）（c）（c）（c）（g）（c）（c）（g）（g）（c）（g）函数）函数）函数）函数（c（c（c）若（c）若（g）若（g）若（g）若（g）若（g）若（g）若（g）若（g）若（g）若（g）若（g）若（g）若（g）若)；m.addEventListener（“设备运动”，e，false）}（本）；

这是一个包装得很好的解决方案，因此您不必担心名称空间问题

只需将它放入脚本（而不是

document.ready（）

，如果您使用的是jQuery）和viola

它所做的就是禁用缩放

devicemotion

事件，这些事件表明

orientationchange

即将发生。这是我见过的最好的解决方案，因为它实际上可以工作，并且不会禁用缩放

---

编辑：这种方法并不总是可靠的，尤其是当你以一定角度握住ipad时。此外，我认为这项活动不适用于gen 1 ipad。禁用缩放是一个坏主意。这不是一个完美的解决方案，但针对webkit在方向改变时缩放字体大小有助于将问题降至最低。你将头部放在f该文件附有：

然后，您可以这样处理CSS中的字体大小缩放：

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

---

我刚刚运行了一些基本的测试，以下几点对我来说非常有用：

这是一个很好的解决办法，可以解决我觉得在mobile safari中存在的一个bug。clamp最初的metatag是我通常设置网站的方式。我怀疑safari中的DOM中有什么东西在某些网站中表现得不符合预期，从而影响了最终显示的页面宽度这个问题的根源是什么。