0

我只使用 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 不应该自动缩小页面吗？相对单位在这里搞砸了我吗？

任何帮助表示赞赏，谢谢！

4

1 回答 1

2

改用这个：

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

于 2013-01-05T19:26:34.607 回答