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

【问题标题】：Detect browser window orientation in CSS在 CSS 中检测浏览器窗口方向
【发布时间】：2015-01-02 16:45:57
【问题描述】：

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

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

并且像这样在纵向：

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

我怎样才能做到这一点？

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

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

【问题讨论】：

所以你想要一种非 JavaScript 的可靠方法来检测方向，而不使用 CSS3？
欢迎来到 2015！ media queries 不再是那种实验性 :) （从我个人的角度来看）
@chipChocolate.py IE8 ...好的，我同意你的看法。但现在的问题是：我们需要在 IE8 上控制 landscape/portrait 吗？ :)
问题是我不仅仅针对移动设备。虽然我的网站有大约 50% 的移动访问者，但我仍然有大约 15% 使用 IE
@what 而不是帮助我们杀死 IE8 并继续努力！（去media queries）

标签： css

【解决方案1】：

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

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

body {
    /* some portrait css */
}

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

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

【讨论】：

该代码是否意味着 @media-CSS 会被不支持 @media-queries 的浏览器忽略，还是会总是应用它？
别忘了在你的答案中添加-vendor-前缀的使用（例如：-ms-、-webkit-...）
如果浏览器不支持，css媒体查询将被忽略。具体来说，在您的情况下，IE8 不支持 CSS 媒体查询。如果您确实必须支持 IE8，此堆栈溢出链接将讨论替代方案。 stackoverflow.com/questions/5769493/…

【解决方案2】：

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

【讨论】：

不是一个解决方案，但它很好地回答了这个问题。