移动 safari 上的网页没有缩放以适应视口？答案

【问题标题】：Webpage on mobile safari is not scaling to fit viewport?移动 safari 上的网页没有缩放以适应视口？
【发布时间】：2013-01-06 04:03:17
【问题描述】：

我创建了一个仅使用 ems 和百分比作为 css 单位的简单程序。它是一个包含一些元素的容器 div，它位于页面中心，代码如下：

position: absolute;
top: 50%;
left: 50%;
margin-top: -25.875em;
margin-left: -38.187em;
padding: 0;
width: 76.375em;
height: 47.75em;

它适用于除 iphone 和 ipad 之外的所有浏览器。它只呈现我页面的右上角。

我补充说：

<meta name="viewport" content="maximum-scale=2, minimum-scale=.2, initial-scale=.6">

它在 ipad 上缩小了自己，但对于 iphone 来说仍然太大，并且页面在纵向模式下根本无法缩放。

最后通过谷歌搜索和使用元标记，我能想到的最佳解决方案是将元标记减少到这样：

<meta name="viewport" content="user-scalable=yes" >

结合这个：

@media all and ( max-device-width: 780px ) {
  body {
    text-align: center;
  }
  .page-content {
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
    margin-top: 4%;
    margin-left: 100px;
    margin-right: 120px;
    margin-bottom: 4%;
    text-align: left;
  }
}

页面仍然呈现非常大的比例，但至少可以缩小。

移动 Safari 不应该自动缩小页面吗？相对单位是不是把我搞砸了？

感谢任何帮助，谢谢！

【问题讨论】：

标签： iphone css mobile-safari viewport

【解决方案1】：

改用这个：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

【讨论】：

如上所述，这不起作用。我看到的只是页面的右上角，更糟糕的是我无法在纵向模式下缩放页面。
既然你已经修复了格式，我猜width: 76.375em; 是一个问题，对于一个。你为什么要设置那种奇怪的特定宽度？如果你想让这个东西适应移动设备，你需要停止在东西上设置固定宽度。从简单开始，也许使用 Twitter Bootstrap 等框架之一，然后以这种方式处理事情。
据我了解，这是创建流体网格布局的一种相当普遍的做法。正如这篇文章中所概述的一个例子：alistapart.com/articles/fluidgrids 我想我会进一步试验这个。 Twitter Bootstrap css 使用同样特定的宽度示例：'.row-fluid .span11 { width: 91.48936170212765%; }' 从 940 像素的基本尺寸开始。我的理解是，我有效地将容器从 16 像素的基本字体大小设置为 1222 像素。我将尝试更改该值。谢谢
不过，您已经严重误读了那篇文章。最重要的是，他们的容器 div 设置了max-width，而不是width，而且绝对不是绝对定位的。从alistapart.com/d/fluidgrids/examples/grid/final.html 的基本代码开始，然后从那里开始工作……尽管我注意到这种流体网格在狭窄的智能手机上看起来不太好。尝试使用媒体查询的响应式设计。
我不相信您会仔细阅读我在这里所说的内容。你也没有回答我提出的任何问题。我可以使用媒体查询来找到我拥有的解决方案。我不是在重新创建文章中的布局。也许我在问题中没有很好地解释我的布局，但从 css 中可以清楚地看出它是一个垂直和水平居中的盒子。我想了解为什么尽管有元标记，iPhone 上的内容却没有按比例缩小。你能回答这个问题吗？