【技术支持】关于html中移动端innerwidth的问题

首先看问题

移动端web相关

屏幕是375*667

html 复制代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0" /> -->
        <meta name="viewport" content="width=device-width, initial-scale=2.0" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
            }
            #test {
                height: 100px;
                background-color: aquamarine;
            }
        </style>
    </head>
    <body>
        <div id="test"></div>
        <script>
            let div = document.getElementById("test");
            console.log(window.innerWidth); //375
            console.log(document.documentElement.clientWidth); //375
            div.style.width = 970 + "px";
            console.log(window.innerWidth); //971
            console.log(document.documentElement.clientWidth); //375
        </script>
    </body>
</html>

此代码在桌面端正常,在移动端有些异常,移动端的window.innerWidth不是视口大小,会变化

解决办法就是<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0" />,添加user-scalable=0

相关推荐
凌辰揽月26 分钟前
AJAX 学习
java·前端·javascript·学习·ajax·okhttp
然我2 小时前
防抖与节流:如何让频繁触发的函数 “慢下来”?
前端·javascript·html
鱼樱前端2 小时前
2025前端人一文看懂 Broadcast Channel API 通信指南
前端·vue.js
烛阴3 小时前
非空断言完全指南:解锁TypeScript/JavaScript的安全导航黑科技
前端·javascript
鱼樱前端3 小时前
2025前端人一文看懂 window.postMessage 通信
前端·vue.js
快乐点吧3 小时前
【前端】异步任务风控验证与轮询机制技术方案(通用笔记版)
前端·笔记
pe7er3 小时前
nuxtjs+git submodule的微前端有没有搞头
前端·设计模式·前端框架
七月的冰红茶4 小时前
【threejs】第一人称视角之八叉树碰撞检测
前端·threejs
爱掉发的小李4 小时前
前端开发中的输出问题
开发语言·前端·javascript
Dolphin_海豚4 小时前
一文理清 node.js 模块查找策略
javascript·后端·前端工程化