js强制手机横屏

if (screen.orientation && screen.orientation.lock) {
  screen.orientation.lock('landscape').then(() => {
    console.log('屏幕已锁定为横屏');
  }).catch(err => {
    console.error('无法锁定屏幕方向:', err);
  });
} else {
  console.log('浏览器不支持屏幕方向锁定');
}

/* 默认样式 */
body {
  background-color: lightblue;
}

/* 横屏样式 */
@media only screen and (orientation: landscape) {
  body {
    background-color: lightgreen;
  }
}

/* 竖屏样式 */
@media only screen and (orientation: portrait) {
  body {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

function handleOrientationChange() {
  if (window.innerHeight > window.innerWidth) {
    // 竖屏
    document.body.style.transform = 'rotate(-90deg)';
    document.body.style.transformOrigin = 'left top';
    document.body.style.width = '100vh';
    document.body.style.height = '100vw';
    document.body.style.overflowX = 'hidden';
    document.body.style.position = 'absolute';
    document.body.style.top = '100%';
    document.body.style.left = '0';
  } else {
    // 横屏
    document.body.style.transform = 'none';
    document.body.style.width = '100vw';
    document.body.style.height = '100vh';
  }
}

window.addEventListener('resize', handleOrientationChange);
window.addEventListener('load', handleOrientationChange);