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

桃扇骨 2023-02-13 04:58 12阅读 0赞

###### *最新更新时间：2020年05月27日15:26:14* ######

#### [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] ####

> 本文内容：移动端不同机型、不同设备的样式兼容性方案汇总

#### 机型 ####

> 屏幕宽高，物理尺寸  
> 屏幕分辨率，物理尺寸上的像素点个数，单位px，window.innerHeight 和 window.innerWidth

<table> 
 <thead> 
  <tr> 
   <th>-</th> 
   <th>真机</th> 
   <th>浏览器模拟器</th> 
   <th>真机小程序webview</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>iPhone 5</td> 
   <td>-</td> 
   <td>320*568</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>iPhone 6/7/8</td> 
   <td>-</td> 
   <td>375*667</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>iPhone 6/7/8 Plus</td> 
   <td>-</td> 
   <td>414*736</td> 
   <td>414*673</td> 
  </tr> 
  <tr> 
   <td>iPhone X</td> 
   <td>-</td> 
   <td>375*812</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>iPad Pro</td> 
   <td>-</td> 
   <td>-</td> 
   <td>1024*1290</td> 
  </tr> 
 </tbody> 
</table>

*  适配代码

/* 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系列机型，移除了底部物理按键，出现了横条的浮动条，在底部悬浮按钮布局时，需要做兼容性处理，避开原生的横条

#### 使用JS的userAgent ####

if(window.navigator.userAgent.toLowerCase().indexOf('ipad') > -1){ 
    	//这是ipad设备
    	this.state.isPad = true;
    }

#### 参考资料 ####

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

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

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[CSS3]: https://www.runoob.com/css3/css3-mediaqueries.html
[iPhone]: https://blog.csdn.net/phunxm/article/details/42174937/
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460