我正在制作这个网站,并为移动设备、平板电脑、笔记本电脑和台式机设置了媒体设置。它在所有其他手机中看起来都不错。我还没有在实际的平板电脑上检查过,但在 chrome 浏览器模拟器上没问题。
但是,我的 friend 在他的 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 */
具有各自设备像素比的设备列表。
关于html - 适用于 Iphone 6 和 Iphone 6 plus 的媒体 Css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36785052/