關於移動端頁面強制豎屏的方法

最近工作中寫了乙個移動端的頁面，本來是沒什麼的，但是有乙個要求感覺很奇怪，從前也沒有遇到過，就是我寫的這個頁面需要放在乙個app中，但是這個app是橫屏的，開啟這個頁面的webview也是橫屏的（最新版的app開啟的時候是豎屏的webview），本來我們是用的rem布局，橫屏的狀態下也是沒有什麼問題的，但是甲方希望在橫屏開啟的時候強制這個頁面豎屏顯示。所以就有了下面一系列的操作了。

首先是判斷橫屏的狀態，使用的一下的**：

function orient() else if(window.orientation == 0 || window.orientation == 180)

}//頁面載入時呼叫

$(function() );

//使用者變化螢幕方向時呼叫

$(window).on('orientationchange', function(e) );

這個就是在監測手機的方向。但是，因為開啟的這個app的時候就是橫屏開啟的，多以這個是沒辦法監測到的，而且這個還有乙個前提就是手機必須開啟了自動旋轉才是可以的。所以上面的方法被拋棄了。

既然智慧型的辦法被拋棄了，那就用最賤的辦法，就是監測螢幕的寬度和高度。當高大於寬的時候，我們預設手機是豎屏的狀態，當寬大於高的時候，我們認為是橫屏的狀態。（當然了這個也是有侷限的，但是考慮到新的app中已經把橫豎屏的問題解決了，這裡就姑且這麼做了）。當豎屏的狀態我們是不需要做什麼的。但是在橫屏的狀態下，我們就要把頁面轉動90度了。廢話不多說，直接看**：

// 利用 css3 旋轉對根容器逆時針旋轉 90 度強制使用者進行豎屏顯示

var detectorient = function() else );

var html_doc = document.getelementsbytagname("html")[0];

html_doc.style.csstext = "font-size:" + height * 1 / 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())

$("body").append(clone_tab);

clone_tab.css()

}相信這段**對於前端人員來說不是很難，但是有一點需要注意的有三點。

第一點：

最開始的時候我是為了方便直接旋轉的整個的html，這個是時候會有乙個問題，就是頁面中的fixed定位的元素，定位就不管用了（**中的就是作為tab切換放在底部的）；這個就需要我們更改了，既然旋轉父元素，子元素就不管用了，那我們就不要旋轉父元素了，直接旋轉他的兄弟元素就可以了。我這裡是旋轉的乙個叫做#vue的元素，因為我的頁面中的其他的內容全部是在這個div當中的。所以我就旋轉了這個元素。然後這個時候定位是可以用的，但是樣式不對，所以在我的add_tab這個函式中就是在調整這個元素的大小和樣式，讓他能正常的顯示在螢幕的右側，也就是豎屏的狀態下，螢幕的底端。

第二點：

第二點需要注意的是，應為我用的是rem布局，多以我會更改html的font-size，但是這個時候就要小心了，當我們旋轉過來之後，寬變成了高，高變成了寬，所以我們需要用height來計算根目錄的字型大小。

第三點：

第程式設計客棧三點就是在程式中註明的，需要我們注意旋轉的中心，預設的旋轉中心是在所選元素的中心點。多以我們要改變旋轉的中心點。旋轉之後還要把html的overflow-y：hidden。否則就會出現多餘的滾動。

這樣的話，基本上就把整個頁面旋轉過來了，並且把底部的fixed定位的元素再次定位成功了。比較幸運的是我們用的彈窗是用的layui的彈窗，再把這個彈窗旋轉90度就可以了。

ps：最後發現一點問題是沒辦法解決的，就是當頁面夠長的時候，也就是有滾動條的時候，彈窗出來以後，滑動後面的遮罩層的話，後面的頁面會向上滑動。這個本來是可以解決的，我上面的這個文章就是利用fixed定位解決的，但是因為旋轉了，這個失效了，所以就沒有好的辦法了。在豎屏狀態下是沒問題的。

本文標題: 關於移動端頁面強制豎屏的方法

本文位址:

關於移動端頁面強制豎屏的方法

關於移動端頁面強制豎屏

移動端強制使用者豎屏顯示

移動端如何強制頁面橫屏

關於移動端頁面強制豎屏的方法

關於移動端頁面強制豎屏

移動端 強制使用者豎屏顯示

移動端如何強制頁面橫屏

相關推薦

移動端強制使用者豎屏顯示