vue项目配置rem

最新推荐文章于 2024-06-04 14:58:37 发布

木头清柠

最新推荐文章于 2024-06-04 14:58:37 发布

阅读量197

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_55295461/article/details/126133950

版权

该段代码主要展示了如何使用JavaScript进行移动端屏幕适配，通过将设计稿横向分辨率除以100获取设备宽度，并设置根元素字体大小。当设备宽度大于750像素时，进行限制，确保页面在不同设备上显示一致。同时，为防止双击放大，添加了touchstart和touchend事件监听器，阻止多指触摸和快速双击操作。

摘要由CSDN通过智能技术生成

export default function() {
    // 7.5根据设计稿的横向分辨率/100得来
    var deviceWidth = document.documentElement.clientWidth;
    // var deviceWidth = window.screen.availWidth
    // console.log(navigator.userAgent)
    // console.log(deviceWidth)
    // console.log(navigator.userAgent)
    if(deviceWidth > 750) {
        // deviceWidth = 750;
        deviceWidth = 7.5 * 100;
    }

    document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';

    // 禁止双击放大
    document.documentElement.addEventListener('touchstart', function (event) {
        if (event.touches.length > 1) {
            event.preventDefault();
        }
    }, false);
    var lastTouchEnd = 0;
    document.documentElement.addEventListener('touchend', function (event) {
        var now = Date.now();
        if (now - lastTouchEnd <= 300) {
            event.preventDefault();
        }
        lastTouchEnd = now;
    }, false);
}