js自動縮放頁面自適應屏幕分辨率

1. 簡單版:

s = window.screen.width / 1920;
document.body.style.zoom = s;

2. 當開發前端頁面在分辨率1920的情況下,需要切換到小屏,有種方法是可以對屏幕比例進行縮放,通過css3屬性transform可以自適應屏幕分辨率大小

var s;
function resize() {
  s = window.screen.width / 1920;
  document.body.style.transformOrigin = '0 0';
  document.body.style.transform = 'scale(' + s + ',' + s + ')';
  document.body.style.width = window.innerWidth / s + 'px';
  document.body.style.height = window.innerHeight / s + 'px';
}
window.onresize = function () {
  resize();
}
resize();

  

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章