今天小编跟大家讲解下有关关于移动端页面强制竖屏的方法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关关于移动端页面强制竖屏的方法 的相关资料，希望小伙伴们看了有所帮助。
最近工作中写了一个移动端的页面 本来是没什么的 但是有一个要求感觉很奇怪 从前也没有遇到过 就是我写的这个页面需要放在一个APP中 但是这个APP是横屏的 打开这个页面的webview也是横屏的（最新版的APP打开的时候是竖屏的webview） 本来我们是用的rem布局 横屏的状态下也是没有什么问题的 但是甲方希望在横屏打开的时候强制这个页面竖屏显示。所以就有了下面一系列的操作了。
首先是判断横屏的状态 使用的一下的代码：
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(); });这个就是在监测手机的方向。但是 因为打开的这个APP的时候就是横屏打开的 多以这个是没办法监测到的 而且这个还有一个前提就是手机必须打开了自动旋转才是可以的。所以上面的方法被抛弃了。
既然智能的办法被抛弃了 那就用最贱的办法 就是监测屏幕的宽度和高度。当高大于宽的时候 我们默认手机是竖屏的状态 当宽大于高的时候 我们认为是横屏的状态。（当然了这个也是有局限的 但是考虑到新的APP中已经把横竖屏的问题解决了 这里就姑且这么做了）。当竖屏的状态我们是不需要做什么的。但是在横屏的状态下 我们就要把页面转动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;"; //$("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定位的元素 定位就不管用了（代码中的<footer>就是作为tab切换放在底部的）；这个就需要我们更改了 既然旋转父元素 子元素就不管用了 那我们就不要旋转父元素了 直接旋转他的兄弟元素就可以了。我这里是旋转的一个叫做#vue的元素 因为我的页面中的其他的内容全部是在这个div当中的。所以我就旋转了这个元素。然后这个时候定位是可以用的 但是样式不对 所以在我的add_tab这个函数中就是在调整这个元素的大小和样式 让他能正常的显示在屏幕的右侧 也就是竖屏的状态下 屏幕的底端。
第二点：
第二点需要注意的是 应为我用的是rem布局 多以我会更改html的font-size 但是这个时候就要小心了 当我们旋转过来之后 宽变成了高 高变成了宽 所以我们需要用height来计算根目录的字体大小。
第三点：
第三点就是在程序中注明的 需要我们注意旋转的中心 默认的旋转中心是在所选元素的中心点。多以我们要改变旋转的中心点。旋转之后还要把html的overflow-y：hidden。否则就会出现多余的滚动。
这样的话 基本上就把整个页面旋转过来了 并且把底部的fixed定位的元素再次定位成功了。比较幸运的是我们用的弹窗是用的layui的弹窗 再把这个弹窗旋转90度就可以了。
ps：最后发现一点问题是没办法解决的 就是当页面够长的时候 也就是有滚动条的时候 弹窗出来以后 滑动后面的遮罩层的话 后面的页面会向上滑动。这个本来是可以解决的 我上面的这个文章就是利用fixed定位解决的 但是因为旋转了 这个失效了 所以就没有好的办法了。在竖屏状态下是没问题的。
以上就是本文的全部内容 希望对大家的学习有所帮助 也希望大家多多支持爱蒂网。
来源：爱蒂网
