移动端WEB页面适配

前言
公司开发一个项目，把安卓和IOS原生开发的同事加了进来，参与h5页面开发。测试时，发现各种适配问题。UI设计的同事问我：你们是不是没有按设计稿来的？检查一看，通篇是px,我做的em适配完全没有用到。因此整理一下移动端WEB页面适配问题记于此。

在这里也要吐槽一下，现在的公司为了省钱，一个人干了几个人的活，有的人还是跨语言开发。难怪很多人吐槽现在的互联网APP没有精品。

实现适配移动端WEB页面的几种方式

通过js判断，动态加载css样式
根据适配的机型不同，动态加载css文件

(function(win,doc){
   var width = doc.documentElement.clientWidth;
   var link =  doc.createElement('link');
   if(wdth<=320){
     link.href = 'min.css'
   }else if(320<width&&width<375){
     link.href = 'b.css'
   }
   .....

})(window,document)

该方法可以做到匹配任何尺寸屏幕的手机和PC,但是需要每种尺寸的屏幕写一个css文件，使得开发工作量变大。

通过meta标签放大或缩小
根据meta标签,动态设置user-scalable,maximum-scale,minimum-scale的值
```
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
```
该方法计算复杂，不宜实现
通过css3媒体查询，显示不同的样式
css3支持媒体查询，可以根据不同尺寸的屏幕显示不同的样式:
```
@media screen and (max-width: 300px) {
       body {
           background-color:lightblue;
        }
    }
```
该方法不用维护多套css文件，灵活，但是每一个样式类有多个尺寸，不易更改
通篇使用em作为单位

em是相对父节点的css长度单位，例如：如果给一个div设置字体大小fontSize为20px,其子节点设置字体大小fontSize为0.5em,则子节点字体的实际大小为0.5*20px = 10px,即：1em = 20px;
rem是相对于根元素的css长度单位，例如：设置html的字体大小fontSize为20px,那么1rem = 20px

使用em实现适配的三种方式：

第一种：
```
    //css文件
        html{
           font-size:100%;
        }
        body{
            font-size:1em;
            pading:0;
            margin:0;
        }
```
优点：纯css实现，简单，同一尺寸的手机显示完全一样；
缺点：手机尺寸不同，显示的可能不同
第二种：
```
//js文件
(function(doc, win) {
    doc.addEventListener('DOMContentLoaded', function() {
        var clientWidth = doc.documentElement.clientWidth || doc.body.clientWidth;
        doc.body.style.fontSize = (clientWidth / 375 * 16) + 'px'
    }, false)
})(document, window)
```
优点：任何尺寸的屏幕都可以显示一样的UI效果
缺点：依赖js,而且要确保手机APP的WebView的宽度与手机屏宽一致

第三种：
```
//css文件
body{
    font-size: 16px;
    margin: 0;
    padding: 0;
}

@media screen and (max-width: 320px) {
    body{
        font-size: 13.654px
    }
}
@media screen and(min-width: 321px) and (max-width: 375px) {
    body{
        font-size: 16px
    }
}
....
```
优点：css加媒体查询实现，可以实现与UI几乎一样的效果
缺点：必须知道所匹配的手机屏宽
使用rem作为单位
rem实现适配的方式与em的后两种类似，只需将body标签换为html标签
使用vm,vh作为单位
vh:浏览器的可视窗口（Viewport）的高度分为100份，即：100vh;
vw:浏览器的可视窗口（Viewport）的宽度分为100份，即：100vw;
使用vh,vw作为单位，也就适配所有机型
优点：不需要考虑手机屏幕大小问题
缺点：不同的字体会出现高度不同，兼容性问题

移动端WEB页面适配

移动端WEB页面适配

猜你喜欢