Question

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

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

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

但是如果我将其旋转回横向模式，它会突然缩放到约125％，这意味着现在可以进行水平滚动，并且自从最初禁用后无法进行缩放。

如何在旋转回风景时以100％变焦恢复？

谢谢！

Answer 1

尝试尝试最大规模和最小规模，如此

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

看看你是否能实现你想要的......

Answer 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 */**

Answer 3

使用maximum-scale和minimum-scale停止缩放功能不起作用，因为这会剥夺用户的缩放功能。这真是一个糟糕的主意，因为它让你的网站不会放大，而其他网站会让你的眼睛恶心的用户感到愤怒......

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

通过此相关问题：How do I reset the scale/zoom of a web app on an orientation change on the iPhone?

在这篇文章中，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时。另外，我认为这个事件不适用于gen 1 ipads

移动safari：设备轮换导致网站缩放不良

3 个答案: