我想尝试制定一种自适应网页设计方法，以便与移动和桌面浏览器共存。
起初看起来在CSS中使用媒体查询就像我需要的那样，所以我接受了这一点，但看起来Google Chrome正在搞乱我想要做的事情。
与大多数浏览器相比，大多数情况下，只有移动浏览器会响应定向媒体查询，这似乎是定位移动浏览器的好方法，无论屏幕大小如何。但是，出于某种原因，谷歌浏览器不仅响应这一点，而且实际上会根据视口的尺寸（窗口本身）选择横向和纵向，而与屏幕本身的位置无关。
这让我想到了另一个潜在的想法。我注意到，在我的移动设备上，设备宽度和设备高度将根据横向和纵向模式交换位置，而桌面上的Google Chrome总是报告显示器的正确尺寸，即使Chrome认为窗口尺寸符合条件作为肖像模式。 我希望做的是找出一种方法来进行媒体查询，以确定设备宽度是否大于设备高度。这应该允许我确定屏幕的真实方向，无论视口大小和Chrome的方向值如何。
我的最终目标是能够为任何报告方向的设备设计一个具有特定移动设备友好布局的页面：纵向和设备宽度小于设备高度，这应该只发生在真正的移动设备上设备处于纵向模式（或罕见的侧面PC显示器，我不介意意外定位），同时为任何设备提供横向/桌面友好布局，屏幕宽度超过它。
我坚决避免使用任何形式的Javascript，useragent查询或服务器端脚本来完成此任务。媒体查询似乎是最快且成本最低（处理方式）的方法，可以让页面主动塑造自己的当前设备，并在移动设备在方向之间旋转时实时移动其位置。
我对这篇文章的最终问题是：我可以在CSS中的媒体查询中指定某种形式的表达式，它只是比较设备宽度和设备高度，并在宽度大于高度时显示一种样式，而副反之亦然？
类似的东西：
@media screen and（device-width＆gt; device-height）// true landscape mode
@media screen not（device-width＆gt; device-height）// true portrait mode或square screen
答案 0 :(得分：2)
经过一些调整和测试后，我想出了以下媒体查询组合，这些查询似乎正在实现我想要完成的任务。
@media only screen and（orientation：landscape）and（min-device-aspect-ratio：1/1）
//这会定位任何处于真正横向方向的屏幕，包括桌面浏览器。这也应该针对浏览器报告横向方向的方形屏幕。
@media only screen and（orientation：portrait）and（min-device-aspect-ratio：1/1）
//这严格针对桌面浏览器，其窗口大小调整为浏览器所考虑的内容＆＃34; portrait＆＃34;模式。这适用于Chrome，Firefox和MS Edge（尚未经过其他人测试）。更具体地说，这针对任何报告纵向模式的浏览器，但屏幕实际上处于横向位置。这也可以针对浏览器报告纵向方向的方形屏幕。
@media only screen and（orientation：portrait）and（max-device-aspect-ratio：1/1）
//这严格针对实际处于纵向方向的设备，主要是移动设备（尽管它可能针对带有旋转显示器的台式机）
这也可能针对报告为纵向模式的方形屏幕，因此您可能需要一个针对正方形屏幕的其他查询。
答案 1 :(得分：0)
我很高兴，你应该做的事情您要寻找的方式，但我认为读者应该帐户几件事情：
首先，正如您所说，监视器也可以旋转，实际上在办公室中看到这种监视器很常见。
第二，在移动设备中，您还可以使用纵向方向的风景视口，反之亦然，因为您可以将屏幕分为两部分。
第三， Pixel 2XL和iPhone X 之类的设备分别具有18：9和19.5：9的比例，这意味着半屏将返回风景。
最后，真正重要的是视口方向，因为它决定了内容区域，无论是台式机屏幕还是移动屏幕。如果您调整桌面窗口的大小，还应该做一些响应以优化可用空间。
作为奖励，iPhone中的 宽度是指视口，而设备宽度是屏幕宽度，与Android不同，屏幕宽度始终是屏幕的较大侧边。
我很想为您的问题提供一个简单的答案，但是没有。这样做响应是不容易的。也许this article（EN）可以为您提供帮助。它给桌面之间的一些线索分裂VS笔记本电脑，笔记本电脑VS平板和平板VS移动。