大屏缩放，实现自适应布局

分手后的思念是犯贱 2022-09-09 06:18 185阅读 0赞

;(function(win){
            var bodyStyle = document.createElement('style')
            bodyStyle.innerHTML=`body{width:1920px; height:1080px!important;overflow: hidden}`
            document.documentElement.firstElementChild.appendChild(bodyStyle)
    
            function refreshScale(){
              let docWidth = document.documentElement.clientWidth;
              let docHeight = document.documentElement.clientHeight;
              var designWidth = 1920,
                  designHeight = 1080,
                  widthRatio = docWidth / designWidth,
                  heightRatio = docHeight / designHeight;
              document.body.style = "transform:scale(" + widthRatio + "," + heightRatio + ");transform-origin:left top;"
            // 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
              setTimeout(function(){
                var lateWidth= document.documentElement.clientWidth,
                  lateHeight = document.documentElement.clientHeight;
                if(lateWidth===docWidth) return;
    
                widthRatio = lateWidth/ designWidth
                heightRatio = lateHeight/ designHeight
                document.body.style = "transform:scale(" + widthRatio + "," + heightRatio + ");transform-origin:left top;"
              },0)
            }
            refreshScale()
    
            win.addEventListener("pageshow", function (e) {
              if (e.persisted) { // 浏览器后退的时候重新计算
                refreshScale()
              }
            }, false);
            win.addEventListener("resize", refreshScale, false);
          })(window)

使用：直接全局调用上面的方法

发表评论取消回复

表情：

评论列表（有 0 条评论，185人围观）

还没有评论，来说两句吧...

相关阅读

相关自适应布局

常见自适应布局有两种：左侧固定右侧自适应、左右两侧固定中间自适应左侧固定，右侧自适应 1、子元素 float:left // html部分 <div c

梦里梦外;/ 2023年08月17日 17:39/ 0 赞/ 135 阅读

相关图片等比例自适应缩放

图片的父级元素宽度写成百分比形式，图片的宽高取100%即可 <li class="desktops_item"> <img clas

忘是亡心i/ 2023年01月08日 12:26/ 0 赞/ 306 阅读

相关【Halcon】图像的自适应显示、缩放、移动

【Halcon】图像的自适应显示、缩放、移动前言：用滚轮实现图像缩放图像的拖动前言：引入Halcon库 using Halc

Love The Way You Lie/ 2022年09月16日 11:20/ 0 赞/ 502 阅读

相关大屏缩放，实现自适应布局

;(function(win){ var bodyStyle = document.createElement('style')

分手后的思念是犯贱/ 2022年09月09日 06:18/ 0 赞/ 186 阅读

相关前端界面缩放(自适应宽高)问题

前端界面缩放(自适应宽高)问题话不多说直接上代码！！！！ -------------------- HTML 代码 //HTML 代码 <body

﹏ヽ暗。殇╰゛Y/ 2022年09月07日 14:52/ 0 赞/ 237 阅读

相关虚幻4DPI自适应缩放规则解析

UMG 支持与分辨率无关的 UI进行自动缩放，可以设置UI随窗口大小变化的股规则。在 ProjectSetting-Engine 部分下的设置菜单中，提供了应用于每个项目的

朴灿烈づ我的快乐病毒、/ 2022年07月14日 08:26/ 0 赞/ 486 阅读

相关图片居中自适应浏览器缩放

代码如下，div里面放图片就好了 <!DOCTYPE html> <head> <meta charset="utf-8"> <tit

落日映苍穹つ/ 2022年07月13日 01:40/ 0 赞/ 248 阅读

相关 css 实现元素自适应屏幕大小---等比缩放

有的时候，我们需要一个元素无论在什么尺寸的设备上都以一定的宽高比展示，或者说等比缩放，比如下面这个例子：无论屏幕大小如何变化，这张背景图都需要完全展示出来。

以你之姓@/ 2022年04月18日 01:41/ 0 赞/ 1632 阅读

相关 rem布局实现不同分辨率移动终端的自适应、整体缩放

前言现在手机屏幕分辨率越来越多，但我们的需求比较唯一——最佳视觉。当用户浏览网页时，根据屏幕的尺寸，来向用户展示更适合用户的布局、文字、图片、按钮等等，因此，re

悠悠/ 2022年02月20日 07:27/ 0 赞/ 339 阅读

相关自适应状态下图片的缩放问题

今天遇到了一个问题，就是在制作自适应网页时DIV中的图片无法做到同div一同缩放。后来发现以下代码可以解决。这个是H5的代码 <div class="bad

迷南。/ 2021年11月04日 14:44/ 0 赞/ 332 阅读