Iphone6和Iphone6的媒体Css加

我正在使这个网站&我做了手机，平板电脑，笔记本电脑，桌面的媒体设置。它在所有其他手机中看起来不错。我还没有检查过实际的平板电脑，但它在Chrome浏览器模拟器上很好。Iphone6和Iphone6的媒体Css加

但是，我的朋友在他的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加上很大的不同。我们已经尝试了从这里的解决方案：iPhone 6 and 6 Plus Media Queries

到目前为止，即使这些查询没有解决我们的问题。似乎没有变化。我希望这个问题可以很快得到解决，我感谢你的帮助。

来源

2016-04-22 Joshua Rajandiran

尝试媒体查询本[这里]（http://stephen.io/mediaqueries/#iPhone），只是检查，如果它是手机的工作注释掉媒体查询（纵向和风景），因为我觉得你的媒体查询可能会覆盖其他iPhone媒体查询。 – sahil

已回答问题... –

http://stackoverflow.com/questions/25759046/iphone-6-and-6-plus-media-queries检查这个问题...伊莫最大的问题是，底部固定栏为iphone在safari中 - –

一切都归结为设备 - 像素比，过去是iPhone的2倍。新iPhone 6加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/

来源

2016-04-22 05:46:39

Iphone6和Iphone6的媒体Css加

回答

相关问题