原生Js 实现等比缩放页面-CUTEPIG BLOG-可爱猪博客

文章目录[隐藏]

针对1920*1080 分配率缩放

针对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;');
}

<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;');

}

Visits: 16

原生Js 实现等比缩放页面

针对1920*1080 分配率缩放

发表回复取消回复

微信公众号

针对1920*1080 分配率缩放

发表回复 取消回复

发表回复取消回复