14

我正在显示不同的内容，具体取决于用户使用 body 标签中的 onorientationchange 调用持有他/她的手机的方式。这很好用——我隐藏了一个 div，同时让另一个可见。

纵向模式下的 div 在第一次加载时看起来很棒。我用它来获得正确的比例/缩放：

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

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

我尝试了许多不同的方法来尝试正确调整屏幕的比例/缩放/宽度，但没有运气。有没有办法做到这一点？

提前致谢！

4

7 回答 7

19

上面接受的“答案”并不是真正的答案，因为不允许任何缩放与要求 IE 用户切换到另一个浏览器一样糟糕。可访问性很糟糕。您希望您的设计在切换视图方向时不做 Apple 认为理想的时髦缩放操作，但您却让残疾用户望而却步。强烈不推荐。

尝试使用媒体查询或 js 挂钩（screen.width 等）在方向更改时自动调整您的设计。这就是为什么这些属性会暴露给我们作为开发人员的原因。

于 2011-05-17T17:03:00.797 回答
7

这是我用来处理媒体查询缩放的方法：

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

最大规模是卖给我的东西。这意味着在 iPhone 上从纵向到横向的过渡非常流畅，完全没有缩放问题......

于 2011-01-04T19:12:50.243 回答
2

当内容大于视口时，我在缩放级别从横向变为纵向时遇到了一些问题。设置“minimum-scale=1.0”，为我解决了这个问题。

于 2011-03-25T11:50:21.770 回答
1

如果您在 safari 中运行网络应用程序，这将不起作用，但我认为如果您在自己的应用程序中使用 UIWebView，它会起作用。

我还没有对此进行测试，但是有一种简单的方法可以让您的 javascript 与代码的 Objective-c 端对话，此时您可以访问诸如缩放 web 视图之类的东西。

于 2009-09-16T04:30:33.173 回答
0

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

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

从这个答案：

但是，如果您分配 User-scalable=no 这意味着网站不允许放大或缩小。

于 2010-03-10T19:04:50.950 回答
0

我想我也有这个问题。尝试在视口标签中添加“最大比例=1.0”（如果您愿意，也可以添加“最小比例=1.0”）。这假设您不希望用户能够扩展（我不希望）

于 2010-03-12T01:01:12.183 回答
0

为此使用元标记不起作用。我已经尝试了所有可能的元标记和事件组合orientationchange，gesturechange我尝试了超时和各种花哨的 javascript，然后我发现了这个： https ://github.com/scottjehl/iOS-Orientationchange-Fix

通过这个相关问题：如何在 iPhone 上更改方向时重置 Web 应用程序的缩放/缩放？

在那篇文章中，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中的解决方案，因此您不必担心名称空间问题。

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

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

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

于 2012-06-01T22:08:56.397 回答