移动端屏幕适配的问题

这是之前课程用的方法,但是我发现输出一直在980px,这是为什么:

这是手机屏幕低于980的时候输出都是980px,大于980px才输出正确值

但是即使是ip的375px的宽度,输出也是980px

楚楚提 2020-02-12

源自：实战：项目准备与骨架搭建 3-2 Tabbar 组件

收起

2回答

好帮手慕码回答被采纳获得+3积分 2020-02-13 10:14:14

同学你好，老师在课程中找到的适配函数和你的有一些不同，如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 需要添加 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <script>
            (function () {
                'use strict';
                setRemUnit();
                window.addEventListener('resize', setRemUnit);
                function setRemUnit() {
                    var docEl = document.documentElement;
                    var ratio = 18.75;
                    //二者选一 
                    // 使用 clientWidth方法 （同学代码中方法）
                    var viewWidth = docEl.clientWidth || window.innerWidth;
                    // 使用getBoundingClientRect().width方法
                    //var viewWidth = docEl.getBoundingClientRect().width || window.innerWidth;
                    docEl.style.fontSize = viewWidth / ratio + 'px';
                    console.log(viewWidth);
                }
            })();

    </script>
</body>
</html>

是可以实现效果的：