手机网站强制竖屏不翻转

更新时间:2023-07-13 17:53:55 来源:青锋建站 作者:青锋建站
  一般来说手机网站在手机横屏下打开也是没啥问题的,横屏的状态下也是没有什么问题的,可能对于在手机端自适应不好的页面希望在竖屏下打开。但是甲方希望在横屏打开的时候强制这个页面竖屏显示。所以青锋建站给大家分享一下手机网站强制竖屏不翻转的解决方法。

判断屏幕状态

function orient() {
             if(window.orientation == 90 || window.orientation == -90) {//横屏
                 //ipad、iphone竖屏;Andriod横屏
                 //$("body").attr("class", "landscape");
                 //orientation = 'landscape';
                 //alert("ipad、iphone竖屏;Andriod横屏");
                 $("p").text("横屏");
                 return false;
             } else if(window.orientation == 0 || window.orientation == 180) {
                //竖屏  //ipad、iphone横屏;Andriod竖屏
   // $("body").attr("class", "portrait");
   // orientation = 'portrait';
                 //alert("ipad、iphone横屏;Andriod竖屏");
                 $("p").text("竖屏");
                 return false;
             }
         }
         //页面加载时调用
         $(function() {
             orient();
         });
         //用户变化屏幕方向时调用
         $(window).on('orientationchange', function(e) {
             orient(); 
         });
  这个就是在监测手机的方向。但是,这个还有一个前提就是手机必须打开了自动旋转才是可以的。所以上面的方法被抛弃了。一个比较高明的方法就是监测屏幕的宽度和高度。当高大于宽的时候,我们默认手机是竖屏的状态,当宽大于高的时候,我们认为是横屏的状态。是在横屏的状态下,我们就要把页面转动90度了。
// 利用 css3 旋转 对根容器逆时针旋转 90 度 强制用户进行竖屏显示
var detectOrient = function() {
     var width = document.documentElement.clientWidth,
         height = document.documentElement.clientHeight,
         //$wrapper = document.getElementsByTagName("body")[0],
         $wrapper = document.getElementById("vue"),
         style = "";
     if(width <= height) { // 横屏
// style += "width:" + width + "px;"; // 注意旋转后的宽高切换
// style += "height:" + height + "px;";
// style += "-webkit-transform: rotate(0); transform: rotate(0);";
// style += "-webkit-transform-origin: 0 0;";
// style += "transform-origin: 0 0;";
         style += "font-size:" + (width * 100 / 1125) + "px";
         var html_doc = document.getElementsByTagName("html")[0];
         html_doc.style.cssText = "font-size:" + (width * 100 / 1125) + "px";
     } else { // 竖屏
         style += "width:" + height + "px;";
         style += "min-height:" + width + "px;";
         style += "-webkit-transform: rotate(-90deg); transform: rotate(-90deg);";
         // 注意旋转中点的处理
         style += "-webkit-transform-origin: " + height / 2 + "px " + (height / 2) + "px;";
         style += "transform-origin: " + height / 2 + "px " + (height / 2) + "px;";
         //style += "font-size:" + height * 100 / 1125 + "px;";
         //$(&quot;html").css({"font-size":(height * 100 / 1125),"overflow-y":"hidden"});
         var html_doc = document.getElementsByTagName("html")[0];
         html_doc.style.cssText = "font-size:" + height * 100 / 1125 + "px;" + "overflow-y:"+"hidden;"+"height:"+height+"px;";
         style += "overflow-y: hidden;";
         add_tab();
         $wrapper.style.cssText = style;
     } 
}
window.onresize = detectOrient;
detectOrient();

function add_tab(){
     var clone_tab = $("footer").clone();
     $("footer").remove();
     clone_tab.css({"transform":"rotate(-90deg)","transform-origin":"top right"})
     $("body").append(clone_tab);
     clone_tab.css({"position":"fixed","right":"1.77rem","bottom":"4rem","left":"auto","top":"0","width":"11.25rem","height":"1.77rem"})
}

注意的问题

第一点:
  最开始的时候我是为了方便直接旋转的整个的html,这个是时候会有一个问题,就是页面中的fixed定位的元素,定位就不管用了(代码中的
就是作为tab切换放在底部的);这个就需要我们更改了,既然旋转父元素,子元素就不管用了,那我们就不要旋转父元素了,直接旋转他的兄弟元素就可以了。我这里是旋转的一个叫做#vue的元素,因为我的页面中的其他的内容全部是在这个div当中的。所以我就旋转了这个元素。然后这个时候定位是可以用的,但是样式不对,所以在我的add_tab这个函数中就是在调整这个元素的大小和样式,让他能正常的显示在屏幕的右侧,也就是竖屏的状态下,屏幕的底端。
第二点:
  第二点需要注意的是,应为我用的是rem布局,多以我会更改html的font-size,但是这个时候就要小心了,当我们旋转过来之后,宽变成了高,高变成了宽,所以我们需要用height来计算根目录的字体大小。
第三点:
  第三点就是在程序中注明的,需要我们注意旋转的中心,默认的旋转中心是在所选元素的中心点。多以我们要改变旋转的中心点。旋转之后还要把html的overflow-y:hidden。否则就会出现多余的滚动。
  这样的话,基本上就把整个页面旋转过来了,并且把底部的fixed定位的元素再次定位成功了。比较幸运的是我们用的弹窗是用的layui的弹窗,再把这个弹窗旋转90度就可以了。
  ps:最后发现一点问题是没办法解决的,就是当页面够长的时候,也就是有滚动条的时候,弹窗出来以后,滑动后面的遮罩层的话,后面的页面会向上滑动。这个本来是可以解决的,我上面的这个文章就是利用fixed定位解决的,但是因为旋转了,这个失效了,所以就没有好的办法了。在竖屏状态下是没问题的。

 

转载请注明来源网址:青锋建站-http://www.sjzphp.com/webdis/shuping_1866.html

电话 15632335515 | 邮箱 943703539@qq.com | QQ 943703539 | 微信 qingfengjianzhan

Copyright © 2016-2026 青锋建站 版权所有