原生Js 实现等比缩放页面

Question

技术类

原生Js 实现等比缩放页面

2021年4月21日 2022年9月9日

针对1920*1080 分配率缩放

<pre class="inline:true class:language-javascript decode:1 " >window.addEventListener('load', adaptation);
window.addEventListener('resize', adaptation);
function adaptation () {
  var w = document.body.clientWidth;
  var h = document.body.clientHeight;
  var nw = 1920;
      nh = 1080;
  var left, top, scale;
  if (w / h &gt; nw / nh) {
    scale = h / nh;
    top = 0;
    left = (w - nw * scale) / 2;
  } else {
    scale = w / nw;
    left = 0;
    top = (h - nh * scale) / 2;
  }
 
  document.body.style.zoom = scale;
  //document.getElementById('main').setAttribute('style', 'transform: scale('+ scale +');left:'+left+'px;top:'+top+'px;');
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<pre class="inline:true class:language-javascript decode:1 " >window.addEventListener('load', adaptation);

window.addEventListener('resize', adaptation);

function adaptation () {

var w = document.body.clientWidth;

var h = document.body.clientHeight;

var nw = 1920;

nh = 1080;

var left, top, scale;

if (w / h > nw / nh) {

scale = h / nh;

top = 0;

left = (w - nw * scale) / 2;

} else {

scale = w / nw;

left = 0;

top = (h - nh * scale) / 2;

}

document.body.style.zoom = scale;

//document.getElementById('main').setAttribute('style', 'transform: scale('+ scale +');left:'+left+'px;top:'+top+'px;');

}

点击数：1

原生Js 实现等比缩放页面

针对1920*1080 分配率缩放

发表回复取消回复

微信公众号

针对1920*1080 分配率缩放

发表回复 取消回复

发表回复取消回复