CSS 媒体查询：使用比较
CSS Media Queries: using comparisons
我想尝试找出一种自适应网页设计的方法，以与移动和桌面浏览器共存。
起初它看起来像在 CSS 中使用媒体查询是我需要的，所以我同意了，但看起来 Google Chrome 弄乱了我想要的要做。
与大多数浏览器相比，在大多数情况下只有移动浏览器响应方向媒体查询，这似乎是一种针对移动浏览器的好方法，无论屏幕尺寸如何。但是，出于某种原因，Google Chrome 不仅对此做出响应，而且实际上 select 横向和纵向取决于视口的尺寸（window 本身）和与屏幕本身的位置无关。
这让我想到了另一个潜在的想法。我注意到在我的移动设备上，设备宽度和设备高度会根据横向和纵向模式交换位置，而桌面上的 Google Chrome 总是报告显示器的正确尺寸，即使 Chrome 认为 window 大小符合纵向模式。
我希望做的是想出一种方法来进行媒体查询，以确定设备宽度是否大于设备高度。这应该允许我确定屏幕的真实方向，无论视口大小和 Chrome 的方向值如何。
我的最终目标是能够为任何报告方向的设备设计一个特别适合移动设备的页面：纵向并且设备宽度小于设备高度，这应该只发生在纵向模式下的真正移动设备（或罕见的横向 PC 显示器，我不介意意外瞄准），同时为屏幕宽度大于高度的任何设备提供 landscape/desktop 友好布局。
我坚决避免使用任何形式的 Javascript、用户代理查询或服务器端脚本来完成此操作。媒体查询似乎是最快和成本最低（处理明智）的方法，它可以让页面主动根据当前设备调整自身形状，并且还会随着移动设备在不同方向之间旋转而实时移动其位置。
我对这个 post 的最终问题是：我可以在 CSS 的媒体查询中指定某种形式的表达式，它只会比较设备宽度和设备高度并显示一种样式当宽度大于高度时，反之亦然？
类似于：
@media screen and (device-width > device-height) //真正的横向模式
@media screen not (device-width > device-height) //真人像模式或方屏
经过一些调整和测试后，我提出了以下媒体查询组合，它们似乎可以实现我想要完成的目标。
@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)
//这严格针对具有 window 调整为浏览器认为的 "portrait" 模式的桌面浏览器。这适用于 Chrome、Firefox 和 MS Edge（尚未测试其他）。更具体地说，这针对报告纵向模式但屏幕实际上处于横向位置的任何浏览器。这也可能针对浏览器报告纵向方向的方形屏幕。
@media only screen and (orientation: portrait) and (max-device-aspect-ratio: 1/1)
//这严格针对实际纵向的设备，主要是移动设备（尽管它可能针对带有旋转显示器的桌面）
这也可能针对报告为纵向模式的方形屏幕，因此您可能需要一个额外的查询来精确定位方形屏幕。
我很高兴你有办法做你想做的事，但我认为读者应该考虑以下几点：
首先，正如你所说，显示器也是可以旋转的，其实办公室里很常见那种显示器。
其次，在移动设备中，您还可以在纵向方向上使用横向视口，反之亦然，因为您可以将屏幕一分为二。
第三，Pixel 2XL和iPhoneX等设备的比例分别为18:9和19.5:9，也就是说半屏会return横屏.
最后，真正重要的是视口方向，因为它决定了内容区域，无论是桌面还是移动屏幕。如果您调整桌面大小 window，您还应该做一些响应以优化您的可用空间 space。
作为奖励，在iPhone中，宽度指的是视口，而设备宽度指的是屏幕宽度，这与Android, 始终是屏幕较大的一侧.
我很想对你的问题有一个简单的答案，但没有。做响应并不容易。也许 this article (EN) 可以帮助你。它提供了一些区分台式机与笔记本电脑、笔记本电脑与平板电脑以及平板电脑与移动设备的线索。
我想尝试找出一种自适应网页设计的方法，以与移动和桌面浏览器共存。
起初它看起来像在 CSS 中使用媒体查询是我需要的，所以我同意了，但看起来 Google Chrome 弄乱了我想要的要做。
与大多数浏览器相比，在大多数情况下只有移动浏览器响应方向媒体查询，这似乎是一种针对移动浏览器的好方法，无论屏幕尺寸如何。但是，出于某种原因，Google Chrome 不仅对此做出响应，而且实际上 select 横向和纵向取决于视口的尺寸（window 本身）和与屏幕本身的位置无关。
这让我想到了另一个潜在的想法。我注意到在我的移动设备上，设备宽度和设备高度会根据横向和纵向模式交换位置，而桌面上的 Google Chrome 总是报告显示器的正确尺寸，即使 Chrome 认为 window 大小符合纵向模式。 我希望做的是想出一种方法来进行媒体查询，以确定设备宽度是否大于设备高度。这应该允许我确定屏幕的真实方向，无论视口大小和 Chrome 的方向值如何。
我的最终目标是能够为任何报告方向的设备设计一个特别适合移动设备的页面：纵向并且设备宽度小于设备高度，这应该只发生在纵向模式下的真正移动设备（或罕见的横向 PC 显示器，我不介意意外瞄准），同时为屏幕宽度大于高度的任何设备提供 landscape/desktop 友好布局。
我坚决避免使用任何形式的 Javascript、用户代理查询或服务器端脚本来完成此操作。媒体查询似乎是最快和成本最低（处理明智）的方法，它可以让页面主动根据当前设备调整自身形状，并且还会随着移动设备在不同方向之间旋转而实时移动其位置。
我对这个 post 的最终问题是：我可以在 CSS 的媒体查询中指定某种形式的表达式，它只会比较设备宽度和设备高度并显示一种样式当宽度大于高度时，反之亦然？
类似于：
@media screen and (device-width > device-height) //真正的横向模式
@media screen not (device-width > device-height) //真人像模式或方屏
经过一些调整和测试后，我提出了以下媒体查询组合，它们似乎可以实现我想要完成的目标。
@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)
//这严格针对具有 window 调整为浏览器认为的 "portrait" 模式的桌面浏览器。这适用于 Chrome、Firefox 和 MS Edge（尚未测试其他）。更具体地说，这针对报告纵向模式但屏幕实际上处于横向位置的任何浏览器。这也可能针对浏览器报告纵向方向的方形屏幕。
@media only screen and (orientation: portrait) and (max-device-aspect-ratio: 1/1)
//这严格针对实际纵向的设备，主要是移动设备（尽管它可能针对带有旋转显示器的桌面）
这也可能针对报告为纵向模式的方形屏幕，因此您可能需要一个额外的查询来精确定位方形屏幕。
我很高兴你有办法做你想做的事，但我认为读者应该考虑以下几点：
首先，正如你所说，显示器也是可以旋转的，其实办公室里很常见那种显示器。
其次，在移动设备中，您还可以在纵向方向上使用横向视口，反之亦然，因为您可以将屏幕一分为二。
第三，Pixel 2XL和iPhoneX等设备的比例分别为18:9和19.5:9，也就是说半屏会return横屏.
最后，真正重要的是视口方向，因为它决定了内容区域，无论是桌面还是移动屏幕。如果您调整桌面大小 window，您还应该做一些响应以优化您的可用空间 space。
作为奖励，在iPhone中，宽度指的是视口，而设备宽度指的是屏幕宽度，这与Android, 始终是屏幕较大的一侧.
我很想对你的问题有一个简单的答案，但没有。做响应并不容易。也许 this article (EN) 可以帮助你。它提供了一些区分台式机与笔记本电脑、笔记本电脑与平板电脑以及平板电脑与移动设备的线索。