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

2021-08-28 20:42:07 字數 1226 閱讀 5520

首先是判斷橫屏的狀態,使用的一下的**:

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

}//頁面載入時呼叫

$(function() );

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

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

window.onresize = function();

window.onload = function();

function detectorient () else

}

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

第一點:

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

第二點:

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

第三點:

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

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

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

關於移動端頁面強制豎屏

首先是判斷橫屏的狀態,使用的一下的 1 function orient else if window.orientation 0 window.orientation 180 17 18 頁面載入時呼叫 19 function 22 使用者變化螢幕方向時呼叫 23 window on orienta...

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

最近工作中寫了乙個移動端的頁面,本來是沒什麼的,但是有乙個要求感覺很奇怪,從前也沒有遇到過,就是我寫的這個頁面需要放在乙個app中,但是這個app是橫屏的,開啟這個頁面的webview也是橫屏的 最新版的app開啟的時候是豎屏的webview 本來我們是用的rem布局,橫屏的狀態下也是沒有什麼問題的...

移動端判斷橫屏豎屏

可能我們在寫移動端專案的時候會有要求或者為了更好的體驗會做橫豎屏檢測,以達到更好的使用者體驗。判斷橫豎屏 var utils delay var detectres document.getelementbyid j detectres var detectdata document.getelem...