使用JavaScript/onorientationchange重置iPhone上Safari的比例/宽度/缩放

我显示的内容取决于用户如何使用body标签中的onorientationchange调用来握住他/她的手机。这很好 - 我隐藏了一个div，同时让其他人可见。使用JavaScript/onorientationchange重置iPhone上Safari的比例/宽度/缩放

纵向模式下的div在第一次加载时看起来很棒。我用这个来得到正确的规模/变焦：

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

即使在纵向模式下的内容碾过，宽度是正确的，并且用户可以向下滚动。横向模式下的显示也很完美。但是，如果横向模式下的内容要求用户向下滚动，那么当用户返回肖像模式时，屏幕会“缩小”以便说话。无论用户是否在横向模式下向下滚动，都会发生这种情况。

我已经尝试了很多不同的事情，试图让屏幕的比例/缩放/宽度正确，但没有运气。有没有办法做到这一点？

在此先感谢！

来源

2009-09-16 dwarbi

这里是我用来对付我的媒体查询变焦：

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

最大规模是为我出售它的东西。这意味着在iPhone上从肖像到风景的过渡非常流畅，根本没有变焦问题......

来源

2011-01-04 19:12:50

完全禁用缩放并不是一个好主意..请参阅Scott Jehl的解决方案：https：//github.com/scottjehl/iOS-Orientationchange-Fix/blob/master /ios-orientationchange-fix.js – tmsimont 2012-06-01 22:10:24

如果您在safari中运行Web应用程序，则无法正常工作，但如果您在自己的应用程序中使用UIWebView，则该工作方式将起作用。

我还没有测试过这个，但是有一个简单的方法可以让你的javascript与代码的objective-c端交谈，在这一点你可以访问web视图的缩放。

来源

2009-09-16 04:30:33 coneybeare

如果您使用的是UIWebView，那么这将起什么作用？我错过了什么？你可以从可可放大UIWebView吗？ – 2009-09-17 01:35:13

我想我误解了这个问题。我所描述的是一个解决方案，如果应用程序使用“内部Safari”或UIWebview。 – coneybeare 2009-09-17 03:07:39

Coneybeare，这是一个网络应用程序，我认为你是对的。经过许多小时的实验后，我无法实现它的工作。这似乎是iPhone上的Safari应该能够支持的东西。好吧。也许有一天... – dwarbi 2009-09-23 02:58:11

您可以在内容属性中设置user-scalable属性。试试这个：

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

从this answer：

但是，如果你指定用户可扩展=没有在其力所能及的网站不允许放大或缩小。

来源

2010-03-10 19:04:50 ekob

小错字 - 它应该是'user-scalable = no' – 2011-11-09 03:01:46

我也想过这个问题。尝试在视口标签中放置“maximum-scale = 1.0”（如果您喜欢它，也许是“minumum-scale = 1.0”）。这是假设你不希望用户能够规模虽然（我不）

来源

2010-03-12 01:01:12 tobyc

当内容大于视口时，我遇到了从横向变为纵向的缩放级别问题。设置“最小规模= 1.0”，为我解决了这个问题。

来源

2011-03-25 11:50:21

上面接受的“答案”并不是真正的答案，因为不允许任何缩放比要求IE用户切换到另一个浏览器差。可达性很差。你希望你的设计不要做苹果公司认为切换视角方向时很理想的时髦缩放功能，但你要离开残疾用户。极不推荐。

尝试使用媒体查询或js挂钩（屏幕。宽度等）在方向改变时自动调整您的设计。这就是为什么这些属性作为开发者暴露给我们的原因。

来源

2011-05-17 17:03:00

用于讨论可用性问题 – Nilesh 2012-03-01 12:31:30

如果您使用的是固定或绝对div，则不适用。 – FlavorScape 2013-08-26 00:51:35

对此使用元标记不起作用。我试过元标记和orientationchange和gesturechange事件可能的每个组合，我想超时和各种花式的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);

也就是说在IIFE很好地包裹着，所以你不必担心名称空间问题的解决方案。

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

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

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

来源

2012-06-01 22:08:56 tmsimont

使用JavaScript/onorientationchange重置iPhone上Safari的比例/宽度/缩放

回答

相关问题