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

Question

我希望我的网站布局如横向：

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

并且像纵向一样：

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

我怎样才能做到这一点？

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

我也知道SO上有很多类似的问题，但它们都涉及针对不同的屏幕尺寸，我不希望如此。我想要的只是可靠地检测最常见的当前浏览器的方向，独立于屏幕大小，而不使用JavaScript。即桌面调整大小到横向的浏览器窗口应该与横向方向的手持移动设备进行相同的渲染，与实际像素宽度无关。

Answer 1

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

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

body {
    /* some portrait css */
}

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

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

Answer 2

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