iphone - 移动 safari 上的网页未缩放以适合视口(viewport)？

Question

我创建了一个仅使用 em 和百分比作为 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;
  }
}

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

mobile safari 不是应该自动缩小页面吗？相关单位是不是把我搞砸了？

感谢任何帮助，谢谢!

Answer 1

改用这个:

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