媒体查询不适用于移动设备和桌面设备上的 CSS3 HTML5

Question

我有一个网页需要变得响应式，更多一点。 显然，我在适当的媒体查询中更改了所需的参数。以下适用于iPhone X：

@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
.carousel-inner {
width: 300%;
}
.main-text {
top: 25px;
}
}

元视口已正确添加到标题中。

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

但是这样就行不通了。使用智能手机 (iPhone X( 浏览时，媒体查询不会自行应用。

准确地说，所有媒体查询部分都位于常规样式的末尾。按顺序，从第 4 款到最新款，都是 iPhone。我不认为这是一个订单问题，也许是进口问题？

这是放置在标题中的链接标签。

<link rel="stylesheet" href="{SITE_URL}templates/{TPL_NAME}/assets/css/slider.css">

感谢您的帮助！

Answer 1

问题可能出在您的像素密度声明中。也许由于设备的像素密度而未显示样式。

值"0.75"表示样式适用于像素密度较低的设备。

值"1"表示样式适用于具有中等像素密度的设备。(例如，我现在使用的笔记本电脑(。

值"1.5"表示具有高像素密度的设备。

因此，您的像素密度值 3 似乎非常高，这可能就是您的样式没有显示的原因。相反，请尝试其他一些值。

在此处阅读有关像素密度规格的更多信息。