js实现项目等宽缩放,大屏适配方案

最新推荐文章于 2025-05-30 09:08:46 发布

原创最新推荐文章于 2025-05-30 09:08:46 发布 · 置顶 · 2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #html5 #css

jq 同时被 3 个专栏收录

1 篇文章

订阅专栏

1 篇文章

订阅专栏

html

1 篇文章

订阅专栏

本文介绍了针对项目大屏适配的需求，采用等宽缩放的解决方案，详细解析了实现过程，包括不同场景下的缩放策略如等比缩放、全屏铺满等。通过引入jQuery并调整CSS属性，确保元素在不同屏幕尺寸下保持正确比例。同时，文章提到了可能遇到的问题，如body宽度计算误差，并提供了相应的修正方法。

项目大屏适配解决方案（等宽缩放）

项目正好有对应需求,实现方案很多,一开始采用了 wh和vw的方案,发现不太适合,所以采用了等宽缩放的方案

该方案参考的阿里的dataV的方案

1. 首先,环境依赖jquery

这里我写了一个例子,可以直接进行参考,scale.js文件代码在2目录,请往下翻,jq我用的是离线的,想要的小伙伴可以采用cdn引入

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Document</title>
</head>
<style>
  html,
  body {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  body {
    background-color: rgb(5, 16, 22);
  }

  .items1,
  .items2 {
    width: 1014px;
    height: 500px;
    background-color: red;
    font-size: 50px;
    color: #ffffff;
    line-height: 500px;
    text-align: center;
    margin-left: 20px;
    float: left;
  }

  .items2 {
    width: 580px;
  }
</style>

<body>
  <div class="items1">1</div>
  <div class="items2">1</div>
</body>
</html>
<script src="./jquery.js"></script>
<script src="./scale.js"></script>

2.scale.js文件代码

;(
    function () {
        window.addEventListener('load', adaptation);
        window.addEventListener('resize', adaptation);
        $('head').append('<meta name="viewport" content="width=' + window.screen.width + '"/>');
        window.screen.width && $('body').css('width', window.screen.width);
        window.screen.height && $('body').css('height', window.screen.height);

        function adaptation() {
            if (window.screen.display === 2) { // 等比缩放高度铺满
                resizeCenter();
            } else if (window.screen.display === 3) { // 全屏铺满
                resizeFull();
            } else if (window.screen.display === 4) { // 等比缩放高度铺满并且可以左右移动
                resizeHeight();
            } else if (window.screen.display === 0) { // 不缩放
                resizeNone();
            } else { // 等比缩放宽度铺满
                resizeWidth();
            }
        }

        function resizeCenter() {
            if (!window.screen.height || !window.screen.width) return resizeCenterBak();
            let ratio = $(window).height() / window.screen.height;
            $('body').css({
                transform: "scale(" + ratio + ")",
                transformOrigin: "left top",
                backgroundSize: 100 * (window.screen.width / $(window).width() * ratio) + "%" + ' 100%',
                backgroundPosition: ($(window).width() - $('body').width() * ratio) / 2 + "px top",
                marginLeft: ($(window).width() - $('body').width() * ratio) / 2
            });
        }

        function resizeFull() {
            if (!window.screen.height || !window.screen.width) return resizeFullBak();
            let ratioX = $(window).width() / window.screen.width;
            let ratioY = $(window).height() / window.screen.height;
            $('body').css({
                transform: "scale(" + ratioX + ", " + ratioY + ")",
                transformOrigin: "left top",
                backgroundSize: "100% 100%",
            });
        }

        function resizeHeight() { //
            if (!window.screen.height || !window.screen.width) return resizeCenterBak();
            let ratio = $(window).height() / window.screen.height;
            $('body').css({
                transform: "scale(" + ratio + ")",
                transformOrigin: "left top",
                backgroundSize: 100 * (window.screen.width / $(window).width() * ratio) + "%" + ' 100%',
                backgroundPosition: ($(window).width() - $('body').width() * ratio) / 2 + "px top",
                // marginLeft: ($(window).width() - $('body').width() * ratio) / 2
            });
            $('html').css({
                overflowX: 'scroll',
            })
        }

        function resizeNone() {
            $('body').css({
                overflow: "hidden",
                position: 'relative'
            });
        }

        function resizeWidth() {
            let ratio = $(window).width() / (window.screen.width || $('body').width());
            $('body').css({
                transform: "scale(" + ratio + ")",
                transformOrigin: "left top",
                backgroundSize: "100%"
            });
        }
    }
)();

注意!!!
如果使用这个案例第一次刷新页面发现body的宽度和想要的相差20像素所有的时候,该问题的原因是

let ratio = $(window).width() / (window.screen.width || $('body').width())
$(window).width不会计算右侧滚动条的距离,所以会出现偏差
可以使用window.innerWidth

// 再做个补充,因为项目是等宽缩放,如果在登陆页出现了高度过高的问题,而且需要修改,那么就修改scale里面的
window.screen.height
// 这个获取的是屏幕的高度,而不是网页的可视化高度,如果有对应需求就将这个修改为
document.body.clientHeight
// 视情况而定,我没用

如果使用后屏幕缩放比例还不对的话

 // 使用这个去实现缩放比例
 let ratio = $(window).width() / ( $('body').width() || window.screen.width );
// 然后将 
 window.screen.width && $('body').css('width', window.screen.width);
 window.screen.height && $('body').css('height', window.screen.height);
// 将window.screen.width和window.screen.height直接替换成自己的设计稿尺寸
// 例如 我的设计稿尺寸是1920*1080,就改为
 window.screen.width && $('body').css('width', 1920);
 window.screen.height && $('body').css('height', 1080);
 // 如果项目后续出现了两个下拉条,那就把下面这行代码取消
 window.screen.height && $('body').css('height', 1080);