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

Question

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

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

就像这样在纵向方向上：

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

我怎样才能做到这一点？

我知道某些实验性的CSS3技术（@media查询）来管理屏幕方向，但它们没有广泛实现，因此对我来说没有用。

我也知道SO上有许多类似的问题，但它们都涉及针对不同的屏幕尺寸，我不希望这样。我想要的只是可靠地检测当前最常见的浏览器的方向，与屏幕大小无关，并且没有JavaScript。也就是说，调整为横向的桌面浏览器窗口应导致与手持移动设备横向相同的呈现，与实际像素宽度无关。

Answer 1

您应该使用 css 媒体查询。 是的，Roko是对的，因为css媒体查询不再是实验性的，并且大多数浏览器都支持。 请参阅犬类以了解支持是普遍的。

关于如何使用，带有方向的css媒体查询，这里已经回答了。 寻找 jsfiddle。

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

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

Answer 2

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