移动端——小屏媒体查询申请大屏答案

【问题标题】：Mobile - Media query for smaller screens applying for larger screens移动端——小屏媒体查询申请大屏
【发布时间】：2017-09-23 12:36:57
【问题描述】：

我有以下针对移动应用的媒体查询，

only screen and (max-height: 630px) and (orientation: portrait) {}

我想要的是将此媒体查询中的样式应用于所有高度为 630px 或更小的屏幕。基本上它应该适用于较小的屏幕。在浏览器上，这很好用。但在实际设备上，它不能正常工作。

大于 630 像素的设备仍会应用该媒体查询中的样式。我设法通过添加像素比率来修复一些屏幕 -

only screen and (max-height: 630px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {}

仍然在一些更大的屏幕（甚至是新手机）上应用这些样式。我在这里做错了什么。

【问题讨论】：

【解决方案1】：

尝试使用device-height

@media only screen 
and (max-device-height: 630px)
and (orientation: portrait)  {
        /* Code */
    }

【讨论】：

您的意思是最大设备高度？如果我拥有的内容太长而无法适应屏幕而无需滚动，我需要在该媒体查询中应用样式。这就是我想使用高度的原因。还有肖像，因为这些是特定于肖像的。
@user3607282 是的 height 也是如此。你试过了吗？
@user3607282 欢迎您，我猜它的工作原理是高度特定于设备的。始终尝试使用任何语言的高度特定的代码来更好地控制事物。
知道了。谢谢！

【解决方案2】：

试试这个。

@media screen and (max-height: 630px){
     //Write your mobile styles here
}

【讨论】：