js simple mobile terminal horizontal and vertical screen adaptation

js simple mobile terminal horizontal and vertical screen adaptation

1. First judge whether the screen is in landscape or portrait mode:
simple judgment method (not very rigorous):
portrait screen: width < height;
landscape screen: width > height;

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 adaptation (take iPhone6/7/8 375*667 as an example):

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'；
  }
}

<