CSS 媒体查询 - iPhone 忽略的视口宽度

Question

我有这个元标记：

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

我有这个 CSS：

@media (max-width: 1100px) and (max-device-width: 1100px) {
    .wrapper {
        width: 200px;
    }
    .page {
        width: 100%;
    }

我也尝试过以下css规则：

@media (max-width: 1100px) and (max-device-width: 1100px) {

和

@media only screen and (max-width : 767px) { .wrapper { width: 100%; } }

和

@media only screen and (min-width: 1024px) and (max-width: 1280px)

和

@media only screen and (min-width: 993px) and (max-width: 1024px)

这些 CSS 规则都不起作用。

这一切在 iPhone 上都被完全忽略了。

但它在调整为 iphone 大小的浏览器中运行良好。

自己看看吧：

http://www.moonshineandfuggles.com/

我已将最大宽度扩展到荒谬的值以尝试包含 iPhone。

我不希望 .wrapper 为 200px，我希望它为 100% 并考虑到设备的宽度。

似乎 iPhone 认为它应该使这个页面大约 700 像素宽。

我怎样才能让 iPhone 意识到我已经使这个网站具有响应性，以便它调整到正确的大小？

Answer 1

以下是您可能会发现对媒体查询有用的一些信息 -

What is the difference between "screen" and "only screen" in media queries?

我的第一个建议是，您将 CSS 流程设计为从支持的最小分辨率向外工作，例如将 CSS 文件设计为支持移动设备，然后使用媒体查询来处理将 CSS 文件中的属性更改为支持更大分辨率的窗口/设备。

以下链接比我以往任何时候都更清楚地解释了这样做的好处 - http://unmatchedstyle.com/news/working-with-media-queries-and-min-width.php。

使用这种设计方法可以更轻松地处理特殊性问题，当您尝试使用媒体查询覆盖已定义的属性时可能会出现这种情况。我从Media Query Styles Not Overriding Original Styles 获得的一种避免此类冲突的便捷方法 - 请注意 Adrift 对 body 的使用。

如果您不打算实际更改属性，则不需要使用媒体查询来覆盖它 - 例如。您无需在媒体查询中指定包装器的宽度，因为它已在 CSS 文件的主体中定义。

至于您在宽度方面的问题，如果您遇到 100% 的问题，请尝试将 body（或者，如果不这样做，包装器）的宽度设置为 100vw。

希望以上内容不要太混乱。

如果您有任何问题，请随时回复。