移动设备下网页自动横竖屏

博客
608
2024-04-23

CSS代码

@media screen and (orientation: portrait) {
  /*竖屏 css*/

  #app{
    /* transform: rotate(90deg); */
    aspect-ratio: 1920 / 1080;
    transform-origin: top left;
    transform: rotate(90deg) translate(0, -100vmin);
    width: 100vh; /* 设置宽度为视口高度 */
    height: 100vw; /* 设置高度为视口宽度 */
    overflow: hidden;
    /* 隐藏超出容器的内容 */
  }
 
}
@media screen and (orientation: landscape) {
  /*横屏 css*/
}

html代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />

  <title>X</title>
</head>

<body>
  
  <div id="app" ></div>
  
</body>

</html>

转载原创文章请注明，转载自：小黑屋ART » 博客 » 移动设备下网页自动横竖屏

内容如果存在侵权，请联系站长进行处理！

博 客

博客