移动端适配方案

最新推荐文章于 2024-07-19 22:55:18 发布

@航空母舰

最新推荐文章于 2024-07-19 22:55:18 发布

阅读量669

点赞数

分类专栏： UI设计

本文链接：https://blog.csdn.net/hudeyong926/article/details/109492681

版权

UI设计专栏收录该内容

31 篇文章 1 订阅

订阅专栏

问题：当前市场上手机屏幕宽度不尽相同，常见有320px（ipone5）、375px（ipone678）等等，而为了在不同宽度的手机屏幕上良好现显示网页，我们需要解决方案。

原理：当前前端解决手机屏幕自适应的手段极多，究其原理，主要分为两大版块：

　　一、使用百分比长度单位，当前百分比长度单位一般如下：vw、vh、vm、em、rem、%，优点：一套css代码即可适应所有屏幕宽度不同的手机；

　　二、使用固定长度单位px，再使用js根据当前屏幕宽度与固定宽度计算比例，进行网页缩放。优点：网页宽度恒定，便于计算

适配方案：

1、百分百比适配
这种适配方案是给元素设置百分比，例如4个div想占满宽度100%，则可以给每一个div设置宽度为25%，这样不固定宽度，使得在不同的手机尺寸下都能达到适配。

缺点：
1. 百分比的值不好计算
2. 需要确定父级的大小，因为要根据父级的大小进行计算
3. 宽度可以设置，但是高度不好设置

一般情况下百分比布局是是需要配合其它的布局而用

2、比例缩放适配
把所有机型的设备独立像素设置成一致的（以前淘宝用的是这种方法），这样做就可以有统一的宽度（设备独立像素宽），过程如下：

（1） viewport需要通过js动态的设置（不能直接把device的值设置成数值）

（2）通过设置比例（初始比例以及缩放比例），把宽度缩放成一致的

注意：

做手机端页面最头疼的就是物理分辨率和逻辑分辨率的转换了，当拿到设计图的时候，图基本都是按物理分辨率来设计的，一般常用的为640（iphone5/5s）、750（iphone6/6s），而谷歌等浏览器采用小手机模式浏览页面的时候，上面的值为逻辑分辨率，调试的时候很难把控页面样式，在手机端的样式也会因此大乱。

var scale = phoneWidth/750;

除以的为设计图设计的页面宽度，750是按iphone6来设计（根据自己使用需求来修改），即让页面的放大比率=屏幕的逻辑分辨率/物理分辨率，从而达到适应手机的效果

概念解析：

phys.width:一般我们所指的宽度width即为phys.width，物理宽度（物理分辨率）

device-width:又称为css-width，设备宽度（逻辑分辨率）

其中我们可以获取phys.width通过document.documentElement.clientWidth;

而获取css-width通过 window.screen.width获取。

所以这里 phoneWidth（逻辑分辨率） = parseInt(window.screen.width);

如iphone6的phys.width为750px，而css-width为375px。

<script>
    (function(){
        /*
         *iphone 6plus
         *原来的尺寸                            414
         *要变成的尺寸（以iPhone 6为基准）375    375
         *比例                                  414/375
         */
        var phoneWidth = parseInt(window.screen.width);
        var scale = phoneWidth/750;//除以的值按手机的物理分辨率
        var meta = document.createElement("meta");
        meta.name = "viewport";
        meta.content = 'initial-scale='+scale+',minimum-scale='+scale+',maximum-scale='+scale+'';
        document.head.appendChild(meta);
    })()
</script>

缺点：
1. 就像在viewport设置宽度的时候，可以把宽度设置成一个固定值一样，会出现所有的手机看上去都是同样的大小，没有分别了，不太好，厂商特意做出各种大小的手机，还要弄成一样，那人家买大屏机有什么意义
2. 算出的的值在一些有小数的情况下可能会出现误差（无关紧要），因为设备独立像素不能有小数

3. viewport适配

根据dpr的值，把视口进行缩放，缩放到物理像素，也就是把屏幕的尺寸(设备的独立像素)直接设置成它对应的物理像素。
https://m.taobao.com 淘宝在用，不过他只处理了dpi为2的几个设置，以及iphone6 plus。

<script>
    (function(){
        /*
         * 320/scale=640
         * 375/scale=750
         * 414/scale=1242
         * 
         * scale=320/640        1/2
         * scale=375/750        1/2
         * scale=414/1242        1/3
         * 
         * scale的值=1/dpr
         */

        var scale=1/window.devicePixelRatio;
        var meta=document.createElement("meta");
        meta.name='viewport';
        meta.content='initial-scale='+scale+',minimum-scale='+scale+',maximum-scale='+scale+'';
        document.head.appendChild(meta);
    })();
</script>

缺点：
1. 这种方法有时候不准确，比如dpr不为整数的时候，会出现除不尽的情况，那缩放的倍数就会出现很长的小数，再去算物理像素的时候就会有误差
2. 如果屏幕的分辨率是非标准的话，算出的物理像素就是非标准的（iphone6 plus是1080而非1242）

但是以上三种适配方案在现在并非主流适配方案，有较明显的缺点，现在主流的适配方案是rem适配和flex适配，这两种适配方案在下一篇讲到。

二、使用固定长度单位px，再使用js根据当前屏幕宽度与固定宽度计算比例，进行网页缩放，来实现移动端屏幕自适应

这个方法主要需要用到css3的两个属性：transform、 transform-origin。通过transform属性的值scale可以进行网页缩放，这是根本。另外必须允许网页缩放，否则transform属性会不起作用。这个手段简单来说，需要先定一个网页宽度（譬如750px），再通过js获取屏幕宽度，屏幕宽度/网页宽度=缩放比例，然后通过js执行缩放（为标签添加transform及transform-origin属性）。话不多说，直接上代码。

<html>
<head>
    <meta content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <style>
    *{margin: 0;padding: 0;}
    #div1{width: 750px;height: 600px;background-color: red;}
    #div2{width: 375px;height: 300px;background-color: green;}
    </style>
</head>
<body id="body">
    <div id="div1">
        <div id="div2"></div>
    </div>
</body>
<script type="text/javascript">
//id    需要进行缩放的标签id
function suofang(id) {
    var num = 750;//css中固定的网页宽度
    var oWidth = window.screen.width;//获取当前手机屏幕宽度
    var objId = document.getElementById(id);//获取传入的id标签对象
    rate = oWidth / num;//缩放比例 = 当前手机屏幕宽度/css中固定的网页宽度
    if (oWidth < 1920) {
        objId.style.transformOrigin = "left top 0px";
        objId.style.transform = "scale(" + rate + ")";
        /* IE 9 */
        objId.style.msTransformOrigin = "left top 0px";
        objId.style.msTransform = "scale(" + rate + ")";
        /* Safari and Chrome */
        objId.style.webkitTransformOrigin = "left top 0px";
        objId.style.webkitTransform = "scale(" + rate + ")";
        /* Firefox */
        objId.style.mozTransformOrigin = "left top 0px";
        objId.style.mozTransform = "scale(" + rate + ")";
        /* Opera */
        objId.style.oTransformOrigin = "left top 0px";
        objId.style.oTransform = "scale(" + rate + ")";
    }
};
suofang("body");//执行缩放
</script>
</html>

假设：200宽x400高的背板图,图标框10x10，手机300宽x500高，背板图根据宽度等比缩放
求：材料框的中心点，拿到高的绝对坐标，放置合成材料图
1、根据背板图宽和手机宽，得出缩放比；
缩放比手机2/3
2、根据缩放比，得出背板图的高，得出图标框的高；
10除2/3，手机框为15x15
3、根据材料框的高，得出框中心点与左上角点的差值(0,0，宽/2,高/2)；
7.5,7.5
4、背板图放置框的坐标乘以缩放比，得出框的中心坐标；
假设背板图放置框的坐标为(100,200)，除以缩放比2/3，手机框中心坐标为(150,300)
5、中心坐标减左上角差值，即为各手机尺寸放置材料框的左上角坐标；
(150,300)-(7.5,7.5)=框的左上角坐标(142.5,292.5)
原理：不同手机显示，背板图和材料框大小会有变化。坐标微调是针对材料框的中心点做微调。

根据设备宽度自动匹配字体大小,从而实现等比缩放的效果。

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 100%;
            height: 10rem;

            background-color: gold;
            line-height: 10rem;
            text-align: center;
        }
    </style>
    <script>
        //监听窗口大小改变
        (function () {
            var calc = function () {
                var html = document.getElementsByTagName('html')[0];
                var width = document.documentElement.clientWidth || document.body.clientWidth //获取屏幕宽度
                var fontSize = 100 / 750 * width;
                /*设置fontsize*/
                html.style.fontSize = fontSize + 'px';
            }
            calc();
            window.addEventListener('resize', calc);
        })();
    </script>
</head>
<body>
<div class="box1">移动端高度等比例问题</div>
</body>
</html>