教你如何用js代码获取屏幕的宽度动态调整界面缩放

当你需要根据屏幕宽度设置不同的缩放比例时，可以使用JavaScript来实现。以下是一个示例代码，它会根据不同的屏幕宽度范围设置不同的缩放比例,首先获取屏幕的宽度，然后根据屏幕的宽度，找到已经配置好的区间，例如350-400时，设置1次initial-scale=0.33为0.33，可以配置多个区间，对应不同的缩放度

html 部分代码：

<meta name="viewport" content="width=device-width, initial-scale=0.33, maximum-scale=1.0, user-scalable=no">

js部分代码：

 <script>
function setViewportScale() {
    // 获取屏幕宽度，使用模拟宽度（开发者工具中的宽度）
    var screenWidth = window.screen.width;

    // 配置不同的区间和对应的缩放比例
    var scaleConfig = [
        { minWidth: 200, maxWidth: 299, scale: 0.2 },
        { minWidth: 300, maxWidth: 361, scale: 0.31 },
        { minWidth: 362, maxWidth: 450, scale: 0.34 },
        { minWidth: 500, maxWidth: 599, scale: 0.45 },
        { minWidth: 601, maxWidth: 800, scale: 0.65 },
        { minWidth: 801, maxWidth: 1200, scale: 0.9 },
         { minWidth: 1201, maxWidth: 9999, scale: 1.0 }
        // 可根据需要添加更多区间和缩放比例
    ];

    // 默认缩放比例，可以根据需要设置
    var defaultScale = 0.33;

    // 根据屏幕宽度选择合适的缩放比例
    var chosenScale = defaultScale; // 默认使用默认缩放比例

    for (var i = 0; i < scaleConfig.length; i++) {
        var config = scaleConfig[i];
        if (screenWidth >= config.minWidth && screenWidth <= config.maxWidth) {
            chosenScale = config.scale;
            break; // 找到匹配的区间后退出循环
        }
    }

    // 设置viewport的缩放比例
    var viewportMeta = document.querySelector('meta[name="viewport"]');
    if (viewportMeta) {
        viewportMeta.content = 'initial-scale=' + chosenScale+', maximum-scale=1.0, user-scalable=no';
    }
}

// 页面加载时调用一次
setViewportScale();

// 监听窗口大小变化，动态调整缩放比例
window.addEventListener('resize', setViewportScale);
</script>

效果：

效果如图所示，很强，获取屏幕用的是var screenWidth = window.screen.width;这个是可以在开发者工具上看到效果的，也就是说这个值可以被模拟，如果和你需要用真实宽度，无视开发者共计的话，就用var screenWidth = window.innerWidth;代替