最新更新时间:2020年05月27日15:26:14
《猛戳-查看我的博客地图-总有你意想不到的惊喜》
本文内容:移动端不同机型、不同设备的样式兼容性方案汇总
机型
屏幕宽高,物理尺寸
屏幕分辨率,物理尺寸上的像素点个数,单位px,window.innerHeight 和 window.innerWidth
- | 真机 | 浏览器模拟器 | 真机小程序webview |
---|---|---|---|
iPhone 5 | - | 320*568 | - |
iPhone 6/7/8 | - | 375*667 | - |
iPhone 6/7/8 Plus | - | 414*736 | 414*673 |
iPhone X | - | 375*812 | - |
iPad Pro | - | - | 1024*1290 |
- 适配代码
/* iphonex 适配 */
@media only screen and (min-height: 724px) {
}
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
}
/* pad 适配 */
@media only screen and (min-width: 500px) {
}
使用CSS多媒体查询
- iPhone X 底部按钮遮挡问题
iphone系列机型,移除了底部物理按键,出现了横条的浮动条,在底部悬浮按钮布局时,需要做兼容性处理,避开原生的横条
<style>
.bottombtn {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 10px;
}
/* iphone X */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
.bottombtn {
padding-bottom: 30px;
}
}
/* plus */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3) {
.bottombtn {
padding-bottom: 30px;
}
}
/* plus */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2) {
.bottombtn {
padding-bottom: 30px;
}
}
</style>
<div class="bottom"></div>
使用JS的userAgent
if(window.navigator.userAgent.toLowerCase().indexOf('ipad') > -1){
//这是ipad设备
this.state.isPad = true;
}
参考资料
感谢阅读,欢迎评论^-^