H5页面强制横屏

最新推荐文章于 2024-04-26 16:47:03 发布

lorlilux

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量3.2k

点赞数

分类专栏： javascript 文章标签： javascript

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/yi_zongjishi/article/details/127123163

版权

javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏


 /*
  * 强制横屏显示：通过竖屏时旋转解决横屏问题
  * 
  */
 @media screen and  (orientation:  portrait){
     #wrapper {
　　　　　
         -webkit-transform:rotate(90deg);
         -webkit-transform-origin:0% 0%;/*1.重置旋转中心*/
         
         -moz-transform: rotate(90deg);
         -moz-transform-origin:0% 0%;
         
         -ms-transform: rotate(90deg);
         -ms-transform-origin:0% 0%;
         
         transform: rotate(90deg);
         transform-origin:0% 0%;
         
         width: 100vh;/*2.利用 vh 重置 ‘宽度’ */
         height: 100vw;/* 3.利用 vw 重置 ‘高度’ */
         
         top: 0;
         left: 100vw;/* 4.旋转后页面超出屏幕，重置页面定位位置 */
     }
 }
 
 setRem();
         window.addEventListener("onorientationchange" in window ? "orientationchange":"resize",function(){
             setRem();
         });
         function setRem(){
             var html = document.querySelector("html");
             var width = html.getBoundingClientRect().width;
             var height = html.getBoundingClientRect().height;
             //判断横屏
             if(width < height){
                 //竖屏
                 html.style.fontSize = height/16 +"px";
             };
             if(width > height){
                 //横屏
                 html.style.fontSize = width/16 +"px";
             }
             
         }