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 宽度基于百分比，并且正文包装器设置为宽度 100%。

任何人都可以至少指出我正确的方向吗？我需要一些花哨的 javascript 或 css 媒体查询吗？如果需要，我将提供代码。 此外，它在不同设备上的行为也不一致。这种情况主要发生在 Android 上...

感谢您的帮助!!

Answer 1

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

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

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

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

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