scale相关文章列表

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

原生Js 实现等比缩放页面

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

}

lyingzhu 0

scale

ios（safari）浏览器，使用100vh遇到的问题和修改方法。

原生Js 实现等比缩放页面