Question

我对媒体查询有疑问。

我的HTML是以下

<div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

我的css如下

.item {
    width: 50px;
    height: 50px;
    background-color: yellow;
    width: 100%;
    margin: 8px;
  }

  @media screen and (max-width: 720px) {
    .item {
        background-color: green;
    }

  }

我在index.html <head>

中有以下行

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

现在，如果我缩小浏览器的大小，我会看到绿色的div。如果我使用Chrome设备模拟器 iPhone6 plus ，我会看到div为绿色。如果我使用其他 iPhone plus 模拟器，我会看到div为绿色。

但是，如果我将此代码安装到应用服务器（在这种情况下是简单的ASW S3），并且我在 iPhone6 plus 上下载页面，我会看到黄色的div。

显然媒体查询无法正常运行。我确信我做错了什么，但此刻我完全失明了。

Answer 1

您必须了解max-width和max-device-width之间的区别。

这里max-width是目标显示区域的宽度，例如，浏览器

和max-device-width是设备整个渲染区域的宽度，即实际的设备屏幕

因此，基于您的设备，iphone 6加上你的css应该如下面的横向模式

@media only screen 
   and (min-device-width : 414px) 
   and (max-device-width : 736px) 
   and (orientation : landscape) 
   and (-webkit-min-device-pixel-ratio : 3) 
{ }

和肖像

@media only screen 
   and (min-device-width : 414px) 
   and (max-device-width : 736px)
   and (device-width : 414px)
   and (device-height : 736px)
   and (orientation : portrait) 
   and (-webkit-min-device-pixel-ratio : 3) 
   and (-webkit-device-pixel-ratio : 3)
{ }

Answer 2

谢谢大家。

我做了一些分析并找到了原因，即使不是解决方案。

托管站点资源的Web服务器是AWS S3实例，例如 http://my-site.s3-website.eu-central-1.amazonaws.com/ 。

如果我直接从AWS S3使用地址http://my-site.s3-website.eu-central-1.amazonaws.com/访问我的网站，那么一切都按预期工作，即媒体查询在移动设备上正常工作。

我想用来访问该网站的域名为 mydomain.com ，我已使用 GODADDY 进行了定义。

因此，我在GODADDY配置中定义了一个重定向规则，以便它指向正确的AWS S3地址。我使用选项“转发屏蔽”，因为我想在浏览器栏上看到 mydomain.com 。

如果我现在使用域mydomain.com访问网站FROM A MOBILE DEVICE，我看到一些不同的东西，该网站看起来好像没有使用css媒体查询。顺便说一句，这只发生在移动设备上，在PC或Mac上的浏览器上，一切都按预期工作。

现在我在 GODADDY 配置中进行了更改。我使用“无掩蔽前进”选项。即使我必须在浏览器栏中看到http://my-site.s3-website.eu-central-1.amazonaws.com/地址，即使在移动设备上也能正常运行。

正如我在开始时所说，这似乎是我所经历的事业的原因。不知道解决方案。我将发布一个更具体的问题，现在我知道更多了。

媒体查询显然不适用于移动设备

2 个答案: