我正在制作这个网站&我为手机,平板电脑,笔记本电脑,台式机制作了媒体设置.在所有其他手机中看起来都不错.我尚未’检查实际的平板电脑,但它在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配备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/

我试图检测当前的设备是iPhone5,iPhone6还是iPhone 6 Plus.

在我的应用程序中,我已经使用这个宏来检测完美的iPhone 5.

#define IS_IPHONE_5      (fabs((double)[[UIScreen mainScreen]bounds].size.height - (double)568) < DBL_EPSILON)

同样,我使用此宏来检测iPhone 6和iPhone 6 Plus.

#define IS_IPHONE_6      (fabs((double)[[UIScreen mainScreen]bounds].size.height - (double)667) < DBL_EPSILON)
#define IS_IPHONE_6_PLUS (fabs((double)[[UIScreen mainScreen]bounds].size.height - (double)736) < DBL_EPSILON)

IS_IPHONE_5宏以任何方向按预期工作.

我的问题是当设备保存在LANDSCAPE中时,IS_IPHONE_6和IS_IPHONE_6_PLUS宏不会返回true.但是,当设备在PORTRAIT中保存时,它们确实可以正常工作.是什么赋予了？

如果有人有更好的建议来检测iPhone5,6和6 Plus请分享.

这是针对iOS系统版本和SDK版本的任何组合进行测试和设计的

#define IS_IPAD (UI_USER_INTERFACE_IdioM() == UIUserInterfaceIdiomPad)
#define IS_IPHONE (UI_USER_INTERFACE_IdioM() == UIUserInterfaceIdiomPhone)
#define IS_RETINA ([[UIScreen mainScreen] scale] >= 2.0)

#define SCREEN_WIDTH ([[UIScreen mainScreen] bounds].size.width)
#define SCREEN_HEIGHT ([[UIScreen mainScreen] bounds].size.height)
#define SCREEN_MAX_LENGTH (MAX(SCREEN_WIDTH,SCREEN_HEIGHT))
#define SCREEN_MIN_LENGTH (MIN(SCREEN_WIDTH,SCREEN_HEIGHT))

#define IS_IPHONE_4_OR_LESS (IS_IPHONE && SCREEN_MAX_LENGTH < 568.0)
#define IS_IPHONE_5 (IS_IPHONE && SCREEN_MAX_LENGTH == 568.0)
#define IS_IPHONE_6 (IS_IPHONE && SCREEN_MAX_LENGTH == 667.0)
#define IS_IPHONE_6P (IS_IPHONE && SCREEN_MAX_LENGTH == 736.0)

注意：如果iPhone 6处于缩放模式,则UI是iPhone 5的放大版本.这反映在宏中.

用法：http://pastie.org/9687735