css - 在 CSS 中检测浏览器窗口方向

Question

我希望我的网站布局像这样横向:

+------------+---------------------+
| Header     |                     |
|            |        Content      |
| Navigation |                     |
+------------+---------------------+

像这样的纵向:

+---------------------+
|        Header       |
+---------------------|
|                     |
|        Content      |
|                     |
+---------------------+
|      Navigation     |
+---------------------+

我怎样才能做到这一点？

我知道某些实验性的 CSS3 technologies(@media queries)管理屏幕方向，但它们没有得到广泛实现，因此对我没有用。

我也知道这里有许多类似的问题，但它们都针对不同的屏幕尺寸，我不希望这样。我想要的只是可靠地检测当前最常见的浏览器的方向，独立于屏幕大小，并且没有 JavaScript。也就是桌面调整为横向大小的浏览器窗口应产生与横向手持移动设备相同的渲染效果，独立于实际像素宽度。

Answer 1

您应该使用 css 媒体查询。是的，Roko 是正确的，因为 css 媒体查询不再是实验性的，而且大多数浏览器都支持它。参见 caniuse看到这种支持是普遍的。

关于如何使用，css media query with orientation，已经回答了here .寻找 jsfiddle .

body {
    /* some portrait css */
}

@media only screen and  (orientation : landscape) {
    /* some landscape css */
}

有关 CSS 媒体查询的更多信息，请参阅 mozilla 的文档.