使用CSS和JS做移动端样式兼容性适配的方案

最新更新时间：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;
}

参考资料

• CSS3 多媒体查询
• iPhone屏幕尺寸、分辨率及适配

感谢阅读，欢迎评论^-^

打赏我吧^-^