在 CSS 中检测浏览器 window 方向

Question

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

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

纵向像这样：

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

我怎样才能做到这一点？

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

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

Answer 1

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

关于如何使用，css media query with orientation，已经回答了here. Look for the jsfiddle。

body {
    /* some portrait css */
}

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

有关 CSS 媒体查询的详细信息，请参阅 mozilla 的文档。

Answer 2

你不能，就这么简单。在您的问题中，您排除了所有可能让您检测 window 方向的技术。

在 CSS 中检测浏览器 window 方向

Detect browser window orientation in CSS

css