css 媒体在桌面浏览器开发者模式下工作，但在实际 iphone 6s 下不工作

Question

以下媒体查询在桌面浏览器的开发者模式下有效，但在实际 iphone 6S 的移动浏览器上无效。

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){

div.woof_sid_auto_shortcode .woof_container {
    background-color: fuchsia !important;
}
}

url 是：https://susustudio.info/load/shop888/ 它是 WordPress 我在 header.

中有这个

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2.0">

知道为什么这不起作用吗？

DubVader 的评论是解决方案。我旁边没有复选标记来切换为已接受。我将查询更改如下：

@media only screen and (max-device-width: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){

div.woof_sid_auto_shortcode .woof_container {
    background-color: fuchsia !important;
}
}

Answer 1

使用（最大设备宽度：667px），而不是高度。

@media only screen and (max-device-width: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){

div.woof_sid_auto_shortcode .woof_container {
    background-color: fuchsia !important;
}
}