iPhone6和iPhone6 plus的媒体CSS

Question

我正在制作这个网站，为移动、平板电脑、笔记本电脑和台式电脑设置了媒体样式。在其他手机上看起来很好。我还没有在实际的平板电脑上检查过，但在Chrome浏览器模拟器上运行良好。

然而，我的朋友在他的iPhone6 Plus上查看网站时，导航栏的设置混乱了。顺便说一下，我正在使用Bootstrap 3框架。

我很困惑为什么我的代码能在其他手机上运行，但在iPhone6 Plus上不能正常工作。也许连iPhone6都有同样的问题？

这是我的媒体CSS：

    /* Tablet (Portrait) */
@media only screen and (max-width : 768px) and (orientation: portrait) {
}
/* Phones (Portrait) */ 
@media only screen and (max-width : 480px) and (orientation: portrait) {
}
/* Phones (Landscape) */ 
@media only screen and (max-width : 480px) and (orientation: landscape){
}
/* Tablet (Landscape)*/
@media only screen and (max-width :1100px) and (orientation: landscape) {
}
/* Medium Devices, Desktops and tablet landscape*/
@media only screen and (min-width : 992px) {
}
/* Large Screens, Large Desktops */
@media only screen and (min-width : 1601px) {
}

我已经在网上查过了，发现iPhone6 Plus的像素密度和分辨率与其他型号有很大不同。我们尝试了这里提供的解决方案：iPhone 6 and 6 Plus Media Queries。

但是，即使使用这些查询，问题仍未得到解决。似乎没有任何改变。我希望这个问题能够迅速解决，感谢您的帮助。

- Joshua Rajandiran

---

尝试使用此处提供的媒体查询（http://stephen.io/mediaqueries/#iPhone），并注释掉您针对手机（纵向和横向）的媒体查询以检查其是否有效，因为我感觉您的媒体查询可能会覆盖其他iPhone媒体查询。 - Sahil

问题已经得到解答... - Nirpendra Patel

请查看这个问题：https://dev59.com/0V8e5IYBdhLWcg3wb56S。在我看来，最大的问题是Safari中iPhone底部固定栏。-. - - nikola_wd

Answer 1

一切都取决于设备像素比，之前iPhone的设备像素比是2倍。新的iPhone 6 Plus拥有3倍视网膜显示屏。

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

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


/* iPhone 6 Plus landscape */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 3)
  {
  /* Your CSS */
  }


/* iPhone 6 Plus portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 3)
  {
  /* Your CSS */
  }



/* iPhone 6 and 6 Plus */
@media only screen
  and (max-device-width: 640px),
  only screen and (max-device-width: 667px),
  only screen and (max-width: 480px)
  {
  /* Your CSS */
  }

此外，CSS | MDN 的一篇文章可添加更多浏览器支持和回退。

链接：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
       (min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */
       (min-resolution: 2dppx),             /* The standard way */
       (min-resolution: 192dpi)             /* dppx fallback */

一份设备列表，包含它们各自的设备像素比。

链接：https://bjango.com/articles/min-device-pixel-ratio/

- Nirpendra Patel