vue项目配置rem

最新推荐文章于 2023-12-22 13:36:30 发布

```木头人```

最新推荐文章于 2023-12-22 13:36:30 发布

阅读量626

点赞数 7

文章标签： vue js

本文链接：https://blog.csdn.net/wjw0125/article/details/108481427

版权

本文介绍了一种根据设备屏幕宽度调整字体大小的响应式设计方法，通过简单的JavaScript代码实现，确保了在不同设备上都能获得良好的阅读体验。同时，文中还包含了禁止双击放大的触摸事件处理，进一步优化了移动设备上的用户体验。

摘要由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);
}