Question

我正在创建一个简单的移动网站，专门在iPhone上呈现。我一直在研究视口设置，以便将网站固定为100％到目前为止，我发现尺寸是

Portrait: 320px
Landscape: 480px

要以完全缩放渲染页面，我在html中使用了以下元标记

<meta name="viewport" content="width=device-width; initial-scale=1; user-scalable=no" />

这在肖像方面很有效，但是当iPhone旋转到横向模式时，页面不会相应调整大小，而是显示为放大。

有人可以建议如何纠正这种行为吗？

Answer 1

width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0

Answer 2

我们假设您的网站包含在名为 #wrapper的容器中。

我们可以将宽度设置为100％，并且只允许最大值为480px。像这样：

#wrapper {
    width: 100%;
    max-width: 480px;
}

您还可以收听iPhone方向发生变化时触发的事件，即当您翻转手机时。

在HTML中

<body onorientationchange="someFunction()">

或在Javascript中

window.onorientationchange = someFunction;