CSS 媒体查询：使用比较

Question

我想尝试制定一种自适应网页设计方法，以与移动浏览器和桌面浏览器共存。

起初，在 CSS 中使用媒体查询似乎是我需要的，所以我就这样做了，但看起来谷歌浏览器搞砸了我想做的事情。

与大多数浏览器相比，在大多数情况下，只有移动浏览器会响应方向媒体查询，这似乎是定位移动浏览器的好方法，无论屏幕大小如何。但是，由于某种原因，谷歌浏览器不仅会对此做出响应，而且实际上会根据视口（窗口本身）的尺寸选择横向和纵向，而与屏幕本身的位置无关。

这让我想到了另一个潜在的想法。我注意到在我的移动设备上，设备宽度和设备高度将根据横向和纵向模式交换位置，而桌面上的谷歌浏览器总是报告显示器的正确尺寸，即使 Chrome 认为窗口大小符合纵向模式。 我希望做的是找出一种方法来进行媒体查询，以确定设备宽度是否大于设备高度。这应该允许我确定屏幕的真实方向，而不管视口大小和 Chrome 的方向值。

我的最终目标是能够为任何报告方向的设备设计一个特别适合移动设备的布局的页面：纵向和设备宽度小于设备高度，这应该只发生在真正的移动设备上设备处于纵向模式（或罕见的侧面 PC 显示器，我不介意意外瞄准），同时为任何屏幕宽于高的设备提供横向/桌面友好的布局。

我坚决避免使用任何形式的 Javascript、用户代理查询或服务器端脚本来完成此任务。媒体查询似乎是最快且成本最低（处理明智）的方法，它可以让页面主动调整自身以适应当前设备，并且还会随着移动设备在方向之间旋转而实时移动其位置。

我对这篇文章的最终问题是：我能否在 CSS 中的媒体查询中指定某种形式的表达式，它会简单地比较 Device-Width 和 Device-Height 并在宽度大于高度时显示一种样式，反之亦然反之亦然？

类似：

@media screen and (device-width > device-height) //真正的横向模式

@media screen not (device-width > device-height) //真正的竖屏或方屏

Answer 1

经过一些调整和测试，我想出了以下媒体查询组合，似乎可以完成我想要完成的工作。

@media 仅屏幕和（方向：横向）和（最小设备纵横比：1/1）
//这针对真正横向方向的任何屏幕，包括桌面浏览器。这也应该针对浏览器报告横向方向的方形屏幕。

@media only screen and (orientation: portrait) and (min-device-aspect-ratio: 1/1)
//这针对严格的桌面浏览器，这些浏览器的窗口大小调整为浏览器认为的“纵向”模式。这适用于 Chrome、Firefox 和 MS Edge（尚未测试其他）。更具体地说，这针对任何报告纵向模式但屏幕实际上处于横向位置的浏览器。这也可能针对浏览器报告纵向的方形屏幕。

@media only screen and (orientation: portrait) and (max-device-aspect-ratio: 1/1)
//这严格针对实际处于纵向的设备，主要是移动设备（尽管它可能针对具有旋转显示器的桌面）
这也可能针对报告为纵向模式的方形屏幕，因此您可能需要一个完全针对方形屏幕的附加查询。

Answer 2

我很高兴您能够按照自己的意愿做事，但我认为读者应该考虑以下几点：

首先，正如你所说，显示器也可以旋转，其实在办公室看到这种显示器很常见。

其次，在移动设备中，您还可以在纵向方向拥有横向视口，反之亦然，因为您可以将屏幕一分为二。

第三，Pixel 2XL和iPhone X等设备的比例分别为18:9和19.5:9，也就是说半屏会回归横向。

最后，真正重要的是视口方向，因为它决定了内容区域，无论是桌面还是移动屏幕。如果您调整桌面窗口的大小，您还应该做一些响应以优化您的可用空间。

另外，在 iPhone 中宽度指的是视口，而 device-width 指的是屏幕宽度，与 Android 不同，它始终是屏幕较大的一侧。

我很想为您的问题提供一个简单的答案，但没有。做响应式并不容易。也许this article (EN) 可以帮助你。它提供了一些线索来区分台式机与笔记本电脑、笔记本电脑与平板电脑以及平板电脑与移动设备。