可视化大屏适配方案

演示

rem.js

JAVASCRIPT
/** * Created by Joubn on 2023/3/2. */ !function (window) { const docWidth = 1920; const docHeight = 810; let containerW let containerH const doc = window.document, docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; window.recalc = (function refreshRem() { const clientWidth = docEl.getBoundingClientRect().width; const clientHeight = docEl.getBoundingClientRect().height; const rateW = (docWidth / docHeight) / (clientWidth / clientHeight) const rateH = clientWidth / docWidth // 这里可以设置某些不需要缩放的元素(如:地图) const container = document.querySelector('#container') if ((clientWidth / clientHeight) > (docWidth / docHeight)) { document.querySelector('body').style = `transform:scale(${rateW * rateH}) translateX(-50%);position: absolute; left:50%;transform-origin:0 0; overflow:hidden` if(container){ if(!containerW){ containerW = container.offsetWidth } container.style = `transform:scale(${1/(rateW * rateH)}) translate(-50%,-50%);transform-origin:0 0;left: 50%;` } } else { document.querySelector('body').style = `transform:scale(${rateH}) translateY(-50%);position: absolute; top:50%;transform-origin:0 0;overflow:hidden` if(container){ if(!containerH){ containerH = container.offsetHeight } container.style = `transform:scale(${1/rateH}) translate(-50%,-50%);transform-origin:0 0;top: 50%;` } } /* 8.55:小于320px不再缩小,11.2:大于420px不再放大 */ //docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11.2), 8.55) * 5 + 'px'; // docEl.style.fontSize = 20 * (clientWidth / docWidth) * 5 + 'px'; docEl.style.fontSize = 100 + 'px'; return refreshRem; })(); /* 添加倍屏标识,安卓倍屏为1 */ docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1); if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) { /* 添加IOS标识 */ doc.documentElement.classList.add('ios'); /* IOS8以上给html添加hairline样式,以便特殊处理 */ if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8) doc.documentElement.classList.add('hairline'); } if (!doc.addEventListener) return; window.addEventListener(resizeEvt, window.recalc, false); doc.addEventListener('DOMContentLoaded', window.recalc, false); }(window);
【END】

本文链接:

版权声明:本blog所有文章除声明转载外,均采用 BY-NC-SA 3.0 许可协议。转载请注明来自 简单才是真

阅读 94 | 发布于 2023-03-02
暂无评论