Question

我设计了一个响应式网站，并使用Compass Susy构建了一个原型。

我在iPad和iPhone上的Mobile Safari上遇到的问题是，当我以纵向模式加载网站，然后旋转到横向时，整个布局可能会向右跳跃30％（它还会缩放缩放比例）适合480px景观宽度。）

我尝试了几件事，我注意到更改了元视口标记 <meta content="width=device-width, initial-scale=1" name="viewport">来 <meta content="width=device-width" name="viewport">（删除初始比例）不会发生跳转。

但是，如果没有该属性，即使在初始纵向视图中，我的手机布局也太小。在两个方向上，它向右冲洗，右边有一个排水沟。

我尝试过放大Susy网格中的列，尽管它在其他平台上显然使布局更宽，但在手机上仍然会缩小以显示右边的排水沟。所以它是某种类型的视口问题。

初始比例设置，在Android上它适合，旋转到横向它不会跳跃，但保持320px（左右边距）。

我需要在这做什么？

Answer 1

我会尽量不要太模糊，不知道你的html结构是如何设置的......但你可以尝试以下步骤让我知道它是否有效：

使用提供的代码Lokase，但删除“user-scalable = 0”部分。
将标签中的所有内容包装在两个空白div中。第一个给出“id ='x'”，第二个给出“class ='resizer'”。不要忘记最后的标签。
将以下内容添加到样式表中： div：firstchild div.resizer { 宽度：100％ } #x {display：block}

这应该在视口宽度加载doc，但仍然提供用户可伸缩性。

这是一项拙劣的工作，但它最近在我为客户做的移动网站上工作。

Answer 2

试试这个：

<meta name="HandheldFriendly"   content="True">
<meta name="MobileOptimized"    content="320">
<meta name="viewport"           content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

元视口地狱

2 个答案: