iPhone 6媒体查询答案

【问题标题】：iPhone 6 media queryiPhone 6媒体查询
【发布时间】：2017-03-15 17:18:53
【问题描述】：

我无法让 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 对我不起作用。

我正在使用 Google Chrome 的响应式网页设计测试器进行测试（我没有 iPhone 6+ 进行测试）。我的<head> 标签中有<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">。

请帮忙！

【问题讨论】：

标签： html css iphone media-queries

【解决方案1】：

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/

【讨论】：

不幸的是，正如我所写， (min-device-width) 根本不适合我。什么都没有发生。
@soulitude 上面的代码已经过很好的测试，我们所有人都使用它来定位 iphone 6，看看它是否适用于你打开 chrome 按下 F12 然后 Ctrl + shift + m 并选择 iphone 6 并刷新你的页面