html - 适用于Iphone6和Iphone6 plus的Media Css

我正在制作这个网站，我为移动设备、平板电脑、笔记本电脑、台式机做了媒体设置。其他手机都很好看。我还没有在实际的平板电脑上检查过，但是在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
到目前为止，即使是那些查询也不能解决我们的问题。好像没有什么变化。希望这个问题能尽快解决，谢谢你的帮助。

最佳答案

一切都归结为设备像素比，过去iPhone的像素比是2倍。新款iPhone 6 Plus具有3x视网膜显示屏

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