(() => {
  let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  let width = document.documentElement.clientWidth;
  let Obody = document.documentElement;
  Obody.style.width = width + 'px';
  let newSize = () => {
    Obody.style.fontSize = (width / 19.2 * 1.25) + 'px'
  }
  window.addEventListener(resizeEvt, newSize, false);
  newSize();
})()

(() => {
  let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  let height = document.documentElement.clientHeight;
  let Obody = document.documentElement;
  Obody.style.height = height + 'px';
  let newSize = () => {
    Obody.style.fontSize = (height / 375) + 'px'
  }
  window.addEventListener(resizeEvt, newSize, false);
  newSize();
})()

不用width的原因是兼容华为的容颜系列手机
荣耀系列手机他的body高度和屏幕高度一样。
屏幕高度包含了最下面那个黑色的按键区域。
但是容器如果和body一样高的话,对于刚好占满一屏幕的页面,
最下面会有一部分被黑色的按键挡住。


博主联系方式:

  • 微信:34419369
  • QQ: 34419369
  • 公众号:前方录
  • 有什么不懂的地方欢迎联系我,帮到你是我会很开心

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注