iPhone 忽略媒体查询答案

【问题标题】：iPhone ignores media queriesiPhone 忽略媒体查询
【发布时间】：2017-08-03 13:54:13
【问题描述】：

我的媒体查询有问题。我完成了我的响应式网站，在桌面、Android 和 Windows Phone 设备上一切正常。我让我的朋友检查他们的 iPhone 是否正常，我感到很惊讶，因为他们的 iPhone（使用 iOS 10）忽略了我的媒体查询。

这怎么可能？问题仅出现在 iPhone（5,5s,6,6s+）上。当我在 Chrome 中扩展网站时，一切都很好。

我的头部有元视口标签。

这是我的媒体查询：

@media (min-device-width: 220px) and (max-device-width: 480px)
{
  /*my styling*/
}

【问题讨论】：

标签： ios css iphone responsive-design media-queries

【解决方案1】：

尝试：（添加screen）

@media screen (min-device-width: 220px) and (max-device-width: 480px)
{
  /*my styling*/
}

另外，将此添加到您的每个响应页面的 HTML 中：

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

【讨论】：

不幸的是，当我添加“屏幕”时，我以前有效的媒体查询现在不起作用。我有这个标签。
你试过@media screen and (...)...吗？我认为screen之后的and是必要的。

【解决方案2】：

您可以尝试使用 min-width 和 max-width 代替设备宽度吗？有时设备宽度与视口不匹配。

@media screen (min-width: 220px) and (max-width: 480px)

你会添加这样的元标记吗？你可以检查一下吗？

 <meta name="viewport" content="width=device-width">

【讨论】：

【解决方案3】：

@necilAlbayrak 是对的。在这里，您有正确的 iphone 媒体查询

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

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

}

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

}

来源：https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

【讨论】：

谢谢，我试过了，但不幸的是什么也没发生。