Question

我创建了一个简单的使用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是否应该自动缩小页面？相关单位是否让我搞砸了？

感谢任何帮助，谢谢！

Answer 1

请改用：

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

移动游猎的网页没有缩放以适应视口？

1 个答案: