适用于 Iphone 6 和 Iphone 6 plus 的媒体 CSS

Posted

技术标签:

【中文标题】适用于 Iphone 6 和 Iphone 6 plus 的媒体 CSS【英文标题】:Media Css for Iphone6 & Iphone6 plus 【发布时间】:2016-08-15 13:36:13 【问题描述】:

我正在制作这个网站,并为手机、平板电脑、笔记本电脑、台式机进行了媒体设置。在所有其他手机中看起来都不错。我还没有在实际的平板电脑上检查过,但在 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

到目前为止,即使是这些查询也没有解决我们的问题。似乎没有任何变化。我希望这个问题能尽快得到解决,感谢您的帮助。

【问题讨论】:

尝试当前的媒体查询here,并检查它是否有效注释掉您的手机媒体查询(纵向和横向),因为我觉得您的媒体查询可能会覆盖其他 iPhone 媒体查询. 问题已经回答... ***.com/questions/25759046/… 检查这个问题... Imo 最大的问题是 Safari 中 iphone 的底部固定栏 -.- 【参考方案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/

【讨论】:

以上是关于适用于 Iphone 6 和 Iphone 6 plus 的媒体 CSS的主要内容,如果未能解决你的问题,请参考以下文章

仅适用于 iPhone 5/5s 和 iPhone 6/6+ 将应用程序提交到 App Store [重复]

支持iPhone 6和iPhone 6+,具有不同的启动/启动屏幕图像,适用于iPad纵向和横向方向

如何限制我的应用仅适用于 iPhone 6 和 6 Plus?

适用于 iPad / iPhone 5、6、6+ 的 UITableView 调整大小

如何在不使用尺寸等级和情节提要的情况下创建适用于 iPhone 4 到 iPhone 6 Plus 的 XIB?

加载用户图像适用于模拟器,但不适用于 iphone xcode 6 Swift