jquery - 移动网站。视口(viewport)宽度卡住回到纵向

Question

我正在尝试建立一个移动网站，到目前为止它在纵向上看起来很棒，当我转向横向时它会调整并且看起来也很好。一旦我回到纵向，宽度就会与横向保持不变，并且布局会发生变化。这些是我在页面顶部的元标记。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0, user-scalable=1" />

此外，我的 css 宽度基于百分比，并且 body wrapper 设置为宽度 100%。

至少有人能在这里为我指明正确的方向吗？我需要一些花哨的 javascript 或 css 媒体查询吗？如果需要，我会提供代码。此外，它在不同设备上的行为也不一致。这主要发生在 Android 上......

感谢您的帮助!!

Answer 1

问题是在视口(viewport)元标记中定义宽度。当宽度设置为 device-width 时，可用宽度将始终为设备的纵向宽度，无论方向如何。这似乎令人困惑，但是 device-width 并不意味着“当前可用的水平区域”，而是字面上设备的标准屏幕宽度。

当未指定宽度时，Mobile Safari 实际上将 device-height 指定为横向宽度。同样，这听起来可能违反直觉，但我们讨论的是正常纵向方向下的标准规范宽度和高度。

Android 手机可能会也可能不会显示类似的行为。我一直无法以某种方式找到任何确认。然而，不幸的是，在 Android 上必须将宽度指定为设备宽度才能使其正常工作。

因此，您最好的选择可能是通过媒体查询来支持行为。您可以检测设备的方向和宽度并基于此应用样式。例如:

@media all and (device-width: 320) and (orientation: portrait) { ... }
@media all and (device-width: 480) and (orientation: landscape) { ... }