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

概述我正在制作这个网站&我为手机,平板电脑,笔记本电脑,台式机制作了媒体设置.在所有其他手机中看起来都不错.我尚未’检查实际的平板电脑,但它在Chrome浏览器模拟器上很好. 但是,我的朋友在他的Iphone6 Plus中查看了该网站,并且导航栏设置搞砸了.顺便说一句,我正在使用Bootstrap 3作为框架. 我很困惑为什么我的代码在其他手机上工作但在Iphone6 Plus上没有. 也许甚至Iph 我正在制作这个网站&我为手机,平板电脑,笔记本电脑,台式机制作了媒体设置.在所有其他手机中看起来都不错.我尚未’检查实际的平板电脑,但它在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/

总结

以上是内存溢出为你收集整理的html – 适用于Iphone6和Iphone6 plus的Media Css全部内容，希望文章能够帮你解决html – 适用于Iphone6和Iphone6 plus的Media Css所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。