时间戳

首页 > 解决方案 > 媒体查询不适用于移动设备和桌面设备上的 CSS3 HTML5

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

问题描述

我有一个需要响应的网页，多一点。显然，我在适当的媒体查询中更改了所需的参数。以下是针对 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) 浏览时，媒体查询不适用。

准确地说，所有媒体查询部分都在一般样式的末尾。通过订购它是所有的 iPhone，从 4 号到最新的。我不认为这是一个订单问题，也许是进口问题？

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

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

谢谢你的帮助 ！

标签： htmlcssmedia-queries

解决方案

问题可能在您的像素密度声明中。由于设备的像素密度，可能没有显示样式。

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

值“1”表示样式适用于中等像素密度的设备。（例如，我现在正在使用的笔记本电脑）。

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

所以看起来你的像素密度值 3 非常高，这可能是你的样式没有显示的原因。相反，请尝试其他一些值。

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

推荐阅读