iPhone 6媒体查询

时间:2016-11-02 11:47:29

标签: html css iphone media-queries

我无法以横向方式获取iPhone 6+的媒体查询以正常运行。肖像工作得很好。 我在iPhone 5上使用@media only screen and (min-width:320px) and (max-width:568px) and (orientation: landscape) {},在iPhone 6+上使用@media only screen and (min-width:414px) and (max-width:736px) and (orientation: landscape) {} - 但后来iPhone 5改为我为iPhone 6+编写的内容。在我将736px宽度更改为800px宽度之前,iPhone 6+不会改变。

我已经尝试了很多不同的东西,这里发现堆栈溢出但没有任何作用。由于某些原因,min / max-DEVICE-width对我不起作用。

我正在使用针对谷歌浏览器的响应式网页设计测试程序进行测试(我还没有使用iPhone 6+进行测试)。 我的<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">代码中有<head>

请帮忙!

1 个答案:

答案 0 :(得分:0)

iphone 6的媒体查询

/* ----------- 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) { 

}

在这里您可以找到关于它的精彩教程https://css-tricks.com/snippets/css/media-queries-for-standard-devices/