我正在尝试建立一个移动网站，到目前为止它看起来很漂亮，当我转向landscpape并且它调整并且看起来也很好。 一旦我回到肖像，宽度保持与横向相同，布局得到顶住。这些是我在页面顶部的元标记。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0, user-scalable=1" />
另外，我的css宽度基于百分比，而body包装器的宽度设置为100％。
任何人都可以至少指出我在这方面的正确方向。我需要一些花哨的javascript或css媒体查询吗？如果需要，我会提供代码。 此外，它在不同设备上的行为不一致。这主要发生在Android上......
感谢您的帮助!!
答案 0 :(得分：4)
问题是在视口元标记中定义宽度。当宽度设置为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) { ... }