js强制手机横屏素材

/* 竖屏样式 */
@media screen and (orientation: portrait) {
  body::before {
    content: "请将设备旋转至横屏模式";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    z-index: 9999;
  }
}

/* 横屏样式 */
@media screen and (orientation: landscape) {
  body::before {
    content: none;
  }
}

window.addEventListener("orientationchange", function() {
  if (window.orientation === 0 || window.orientation === 180) {
    alert("请将设备旋转至横屏模式");
  }
});

/* 强制横屏显示 */
@media 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;
  }
}