1

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

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

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

但是，如果没有该属性，我的手机布局太小，即使在最初的纵向视图中也是如此。在两个方向上，它都与右边的排水沟齐平。

我已经尝试扩大 Susy 网格中的列，虽然它明显使其他平台上的布局更宽，但在手机上仍然会缩小以显示右侧的排水沟。所以这是某种视口问题。

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

我需要在这里做什么？

4

2 回答 2

1

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

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

这应该以视口宽度加载文档，但仍为用户提供可伸缩性。

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

于 2012-06-23T18:59:31.233 回答
0

尝试这个：

<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">
于 2012-06-22T15:49:16.390 回答