05、移动端屏幕适配

准备

前提

一般移动适配都需要设置视口

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">

 

 

简单适配

原理

页面用rem作为单位，html定义font-size，随着窗口的变化，动态设置font-size。

 

技巧

1、设置font-size：要求容易换算

html{
    font-size: 15px;
}

2、获取固定系数：设计稿宽度 / font-size = 固定系数

//若设计稿1200px宽，font-size为15px
//所以 1200 / 15 = 80；
var ratio = 80; 

3、获取不同屏幕宽度：用实际的屏幕宽度 代替 设计稿宽度

// 获取屏幕宽度
var viewWidth = document.documentElement.clientWidth || window.innerWidth || document.documentElement.getBoundingClientRec().width;

4、动态设置font-size：

//设置html的font-size
document.documentElement.style.fontSize = viewWidth / ratio + 'px';

5、窗口发生变化就改变font-size：将上面代码封装到函数里

//页面加载时，触发一次
setFont();
//当宽口发生变化时，再触发一次
window.addEventListener('resize',setFont);    

 

实际操作

function setFont(){
    // 获取屏幕宽度
    var viewWidth = document.documentElement.clientWidth || window.innerWidth || document.documentElement.getBoundingClientRec().width;
    //定义一个固定的系数
    var ratio = 27.24;
    //设置html的font-size
    document.documentElement.style.fontSize = viewWidth / ratio + 'px';
}
//页面加载时，触发一次
setFont();
//当宽口发生变化时，再触发一次
window.addEventListener('resize',setFont);        

 

缺点

不能解决1px边框问题。就是在dpr为1的时候边框是1px，dpr为2时边框为2px，dpr为3时边框为3px。

 

通用适配

//在简单适配的基础上修改

原理

设置了边框为1px，但是在dpr为3的时候就变成了3px。我们可以在meta的视口标签上更改页面的缩放比就可以解决。如dpr为1时缩放比为1；dpr为2时缩放比为1/2；dpr为3时缩放比为1/3。

 

技巧

1、获取viewport的meta标签：

var viewport = document.querySelector('meta[name=viewport]');

 

2、获取当前的dpr值：

var dpr = window.devicePixelRatio;

 

3、定义scale值：

var scale = 1 / dpr;

 

4、更改viewport里面的scale值：

//自定义一个contennt，里面用上面计算出的scale
var cont = 'width=device-width,initial-scale='+ scale +',user-scalable=no,maximum-scale='+ scale +',minimum-scale='+ scale;
//更改meta标签里面的content
viewport.setAttribute('content',cont);

 

5、禁止font-size无限制被放大 / 缩小：（可选）

//定义最大宽度和最小宽度（这里定义的是不带dpr的宽度）
var maxWidth = 540 , minWidth = 320;
//若屏幕宽度比max-Width大，则viewWidth等于max-Width
if(viewWidth > (maxWidth*dpr)){
    viewWidth = maxWidth*dpr;
}
//若屏幕宽度比min-Width小，则viewWidth等于min-Width
else if(viewWidth < (minWidth*dpr)){
    viewWidth = minWidth*dpr;
}

 

 

实际操作

//获取viewport
var viewport = document.querySelector('meta[name=viewport]');
//获取dpr
var dpr = Math.floor(window.devicePixelRatio);
console.log("dpr"+dpr);
//计算scale
var scale = 1 / dpr;
//更改viewport里面的scale
var cont = 'width=device-width,initial-scale='+ scale +',user-scalable=no,maximum-scale='+ scale +',minimum-scale='+ scale;
viewport.setAttribute('content',cont);

 

 

个人终极版适配

在html设置视口

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">

 

在css设置font-size

html{
    font-size: 100px;
}

 

在js做适配（可直接当外部文件引入使用）

window.onload = function(){
    function setFont(){
        //获取viewport
        var viewport = document.querySelector('meta[name=viewport]');
        //获取dpr
        var dpr = Math.floor(window.devicePixelRatio);
        //计算scale
        var scale = 1 / dpr;
        //更改viewport里面的scale
        var cont = 'width=device-width,initial-scale='+ scale +',user-scalable=no,maximum-scale='+ scale +',minimum-scale='+ scale;
        viewport.setAttribute('content',cont);

        // 获取屏幕宽度（获取到的宽度 是带dpr的宽度）
        var viewWidth = document.documentElement.clientWidth || window.innerWidth || document.documentElement.getBoundingClientRec().width;
        
        //定义最大宽度和最小宽度（这里定义的是不带dpr的宽度）
        var maxWidth = 540 , minWidth = 320;
        //若屏幕宽度比max-Width大，则viewWidth等于max-Width
        if(viewWidth > (maxWidth*dpr)){
            viewWidth = maxWidth*dpr;
        }
        //若屏幕宽度比min-Width小，则viewWidth等于min-Width
        else if(viewWidth < (minWidth*dpr)){
            viewWidth = minWidth*dpr;
        }

        //定义一个固定的系数
        var ratio = 12;
        //设置html的font-size
        document.documentElement.style.fontSize = viewWidth / ratio + 'px';        
    }
    //页面加载时，触发一次
    setFont();
    //当宽口发生变化时，再触发一次
    window.addEventListener('resize',setFont);
}