CSS媒体查询：使用比较

Question

我想尝试的工作出来的自适应网页设计的方法与移动和桌面浏览器共存。

起初看起来像CSS使用媒体查询是我需要什么，所以我和那去了，但它看起来像谷歌浏览器是搞乱了我想做的事。

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

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

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

我使用任何形式的Javascript，用户代理查询，或者服务器端脚本来实现这一点坚决避免。媒体查询似乎是最快和成本最低（处理方式）的方法，有一个页面可以自动将其自身形成为当前设备，并且随着移动设备在方向之间旋转，实时移动其位置。

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

是这样的：

@media屏幕和（装置宽度>于设备的高度）//真实风景模式

@media屏幕不（装置宽度>于设备的高度）//真肖像模式或方形屏幕

Answer 1

一些调整和测试后，我想出了媒体查询以下组合似乎做什么，我试图完成。

@media只有屏幕和（取向：横向）和（最小 - 设备纵横比：1/1）
//这靶向任何屏幕，是在真正的横向方向，包括桌面浏览器。这也应该以浏览器报告横向方向的方形屏幕为目标。

@media只有屏幕和（方向：纵向）和（分设备纵横比：1/1）
//这个目标有调整到什么样的浏览器窗口严格的桌面浏览器考虑“肖像”模式。这适用于Chrome，Firefox和MS Edge（未测试其他）。更具体地说，它针对任何报告纵向模式的浏览器，但屏幕实际上处于横向位置。这也可以针对浏览器报告纵向方向的方形屏幕。

@media只有屏幕和（方向：纵向）和（MAX-设备纵横比：1/1）
//这严格靶向实际上是在纵向定向装置，主要的移动设备（尽管它可能以具有旋转监视器的桌面为目标）
这也可能会将报告为纵向模式的方形屏幕作为目标，因此您可能需要一个额外的查询来精确定位方形屏幕。