移动Safari浏览器：设备旋转引起网站

的坏缩放我有iPhone和iPad的移动网站，我关闭用户与移动Safari浏览器：设备旋转引起网站

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

缩放，只要该网站是在横向模式下能正常工作。网站的宽度恰好是屏幕的宽度。然后，如果我将设备旋转到纵向模式，它会缩小，以适应新（较短）的宽度。这也是可以的。

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

回到风景时，我怎样才能在100％变焦时变回来？

谢谢！

来源

2011-02-24 clamp

尝试用最大规模和最小规模的实验，像这样

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

，看看你能达到你在找什么..

来源

2011-03-30 20:24:41 thumbsup

我只是进行了一些初步的测试和以下为我创造了奇迹：'' – Bitmanic

初始缩放比例对我也有帮助 - on iPad。 – cbuck12000

这是一个很好的解决方法，我觉得是移动Safari浏览器中的一个错误。钳的原始元标记是我通常如何设置我的网站。我怀疑Safari中的某些东西在某些网站中的行为并不像预期的那样混乱，最终导致此问题。 – ghostfly

使用maximum-scale和minimum-scale停止变焦别因为那样你就会失去用户放大的能力。这的确是一个糟糕的主意，因为它使您的用户眼睛不好生气，你的网站不放大，而其他网站做...

我尝试超时和各种花式的javascript的，后来我发现这一点： https://github.com/scottjehl/iOS-Orientationchange-Fix

在那个岗位，安德鲁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);

这是一个SOLUT离子很好地包裹在一个IIFE，所以你不必担心名称空间问题。

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

它所做的只是在devicemotion上禁用缩放，表明orientationchange即将发生。这是我见过的最好的解决方案，因为它实际上工作并且不禁用缩放。

编辑：这种方法并不总是可靠的，特别是当你拿着一个角度的ipad。此外，我不认为这个事件可用于第一代ipad

来源

2012-06-01 22:17:13 tmsimont

禁用缩放是一个坏主意。这不是一个完美的解决方案，但是针对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 */**

来源

2013-01-11 20:41:05

移动Safari浏览器：设备旋转引起网站

回答

相关问题