如何按比例缩放整个网站？附CSS+jQuery实现方案及关键代码

最近发现了一种能让整个网站按比例自适应缩放的实用方法，核心是通过CSS Transform配合jQuery实现，不管窗口尺寸怎么变化，都能保持页面元素的比例协调，避免布局错乱。

核心逻辑 #

• 先预设一个页面基准宽度（示例中用的是1000px，可根据自己的设计稿调整）
• 实时获取当前html容器的实际宽度，计算缩放比例
• 当窗口宽度小于基准宽度时，保持1:1的原始比例；大于基准宽度时，按比例放大页面
• 监听窗口resize事件，确保缩放效果随窗口变化实时更新

关键代码实现 #

jQuery(document).ready(function($){
    // 初始化执行缩放
    nsZoomZoom();
    // 窗口尺寸变化时重新计算缩放
    $( window ).resize(function() {
        nsZoomZoom();
    });

    function nsZoomZoom() {
        const htmlWidth = $('html').innerWidth();
        const bodyWidth = 1000; // 自定义的页面基准宽度

        // 计算缩放比例
        const scale = htmlWidth < bodyWidth ? 1 : htmlWidth / bodyWidth;

        // 为不同浏览器添加兼容的transform属性，确保缩放从左上角开始
        $('body').css({
            '-ms-transform': `scale(${scale})`,
            '-webkit-transform': `scale(${scale})`,
            'transform': `scale(${scale})`,
            '-ms-transform-origin': 'top left',
            '-webkit-transform-origin': 'top left',
            'transform-origin': 'top left'
        });
    }
});

注意事项 #

• 一定要设置transform-origin为top left，否则缩放会从页面中心开始，导致页面偏移
• 基准宽度bodyWidth需要和你的设计稿宽度保持一致，才能保证缩放比例准确
• 代码兼容IE9及以上的主流浏览器，无需额外适配

内容的提问来源于stack exchange，提问作者user300258