iPhone 忽略媒体查询

Posted 2023-03-06

【中文标题】iPhone 忽略媒体查询

【英文标题】：iPhone ignores media queries

【发布时间】：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*/

【参考方案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/

【讨论】：

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