CSS3判斷手機橫屏豎屏

2021-07-06 05:02:25 字數 413 閱讀 1868

原理:

當使用者旋轉螢幕的時候,會進入到你的監聽方法中,然後通過window.orientation來獲取當前螢幕的狀態:

0 - 豎屏

90 - 逆時針旋轉橫屏

-90 - 順時針旋轉橫屏

180 - 豎屏,上下顛倒

如果你不希望使用者使用橫屏方式檢視你的網頁,你可以在裝置旋轉時間監聽裡面對body使用css3裡面的transition中的旋轉來保持頁面豎向。

移動裝置上的頁面,當螢幕旋轉的時候會有乙個orientationchange事件。你可以給body元素增加此事件的監聽:

@media screen and (orientation:portrait)

@media screen and (orientation:landscape)

手機橫屏豎屏css

media是css3中新定義的,功能非常強大,顧名思義pc是無法匹配橫豎屏的,所以orientation只對移動裝置起效。1.頭部宣告 複製 如下 加到複製 如下 2.media匹配螢幕是橫屏還是豎屏 複製 如下 media all and orientation landscape media a...

判斷手機是橫屏還是豎螢幕

media screen and orientation portrait media screen and orientation landscape 分開寫在2個css中 豎屏橫屏 判斷手機橫豎屏狀態 window.addeventlistener onorientationchange in ...

JS判斷手機瀏覽器是橫屏or豎屏

用到手機上,不可避免,還需要知道 手機上現在是橫屏還是豎屏 看到文章 判斷手機橫豎屏狀態 function hengshuping if window.orientation 90 window.orientation 90 window.addeventlistener onorientation...