iPhone 6 上的错误媒体查询触发器答案

【问题标题】：Wrong media-query triggers on iPhone 6iPhone 6 上的错误媒体查询触发器
【发布时间】：2015-07-13 18:39:37
【问题描述】：

我有 2 个媒体查询：

@media only screen and (max-width: 550px), (max-height: 550px) and (min-device-width: 500px)

和

@media only screen and (max-width: 550px), (max-height: 550px) and (min-device-width: 800px)

为什么最后一个会覆盖第一个？ iphone 6纵向的min-device-width不是800px吧？

我也尝试了 min-width 而不是 min-device-width

【问题讨论】：

对于 iphone 6 使用此 @media only 屏幕和 (min-device-width : 375px) 和 (max-device-width : 667px) - 来自：stephen.io/mediaqueries

标签： css iphone media-queries

【解决方案1】：

逗号是OR 参数。这意味着在这种情况下，只要max-width: 550px 为真，设备就不会关心以下参数。

删除逗号并用and 替换它们应该可以解决问题。

【讨论】：

【解决方案2】：

就像 KittMedia 说的，你应该用“and”替换逗号，这样两个语句都会被执行。

例子：

@media only screen and (max-width: 550px) and (max-height: 550px) and (min-device-width: 800px) {
     p {display: none}
}

<p>This will disappear on an iPhone 6</p>

【讨论】：