html – 适用于Iphone6和Iphone6 plus的Media Css
发布时间:2020-12-14 23:27:54 所属栏目:资源 来源:网络整理
导读:我正在制作这个网站我为手机,平板电脑,笔记本电脑,台式机制作了媒体设置.在所有其他手机中看起来都不错.我尚未’检查实际的平板电脑,但它在Chrome浏览器模拟器上很好. 但是,我的朋友在他的Iphone6 Plus中查看了该网站,并且导航栏设置搞砸了.顺便说一句,我正
我正在制作这个网站&我为手机,平板电脑,笔记本电脑,台式机制作了媒体设置.在所有其他手机中看起来都不错.我尚未’检查实际的平板电脑,但它在Chrome浏览器模拟器上很好.
但是,我的朋友在他的Iphone6 Plus中查看了该网站,并且导航栏设置搞砸了.顺便说一句,我正在使用Bootstrap 3作为框架. 我很困惑为什么我的代码在其他手机上工作但在Iphone6 Plus上没有. 这是我的媒体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/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |