Question

我的媒体查询存在问题。我完成了自己的响应式网站，桌面，Android和Windows Phone设备上的一切正常。我让我的朋友们检查一下他们的iPhone是否正常而且我受够了，因为他们的iPhone（iOS 10）忽略了我的媒体查询。

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

我的头部中有meta视口标记。

这是我的媒体查询：

$ phpunit --version
PHPUnit 3.7.28 by Sebastian Bergmann.

Answer 1

尝试:(添加<xs:schema xmlns:b="http://schemas.microsoft.com/BizTalk/2003" xmlns:xs="http://www.w3.org/2001/XMLSchema">）

screen

PLUS，在每个响应式页面中将其添加到您的HTML中：

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

Answer 2

@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/

Answer 3

可以尝试使用min-width和max-width而不是设备宽度。有时设备宽度与视口不匹配。

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

你甚至添加元标记就可以检查吗？

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

iPhone忽略了媒体查询

3 个答案: