js简单的移动端横竖屏适配

js简单的移动端横竖屏适配

1、先判断处于横屏还是竖屏状态：
简单的判断方式（不是很严谨）：
竖屏： 宽度 < 高度；
横屏：宽度 > 高度；

function getWandH() {
  let W =  document.documentElement.clientWidth || document.body.clientWidth;
  let H =  document.documentElement.clientHeight || document.body.clientHeight;
  // width大于height即可视窗口宽度大于可视窗口高度时为横屏状态；
  return W / H > 1;
}

2、rem适配（以iPhone6/7/8 375*667为例）：

function setRem() {
  if (getWandH()) {
    document.documentElement.style.fontSize = Math.min(screen.width, document.documentElement
    .getBoundingClientRect().width) / 667 * 16 + 'px';
  } else {
    const scale = document.documentElement.clientWidth / 750；
  	document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'；
  }
}

<