禁用用戶自動縮放功能：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

判斷橫豎屏狀態(tài)有兩種方法：css判斷、js判斷

(一)、css判斷橫屏還是豎屏

1、寫在同一個css文件中 @media screen and (orientation: portrait) {/*豎屏 css*/ } @media screen and (orientation: landscape) {/*橫屏 css*/ }

根據(jù)橫豎屏設(shè)置大小時，正常頁面尺寸常規(guī)書寫即可，橫屏樣式單獨設(shè)置。即只需在原有樣式基礎(chǔ)上添加橫屏樣式即可，

@media screen and (orientation: landscape) {/*橫屏 css*/ }
當(dāng)用戶橫屏?xí)r加載橫屏樣式，豎屏?xí)r取消橫屏樣式即加載默認(rèn)樣式。

2、分開寫在兩個css中，根據(jù)橫豎屏引用不同樣式文件：

? ? 根據(jù)橫豎屏引用不同樣式文件

橫屏：

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

豎屏：

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

備注：css判斷橫豎屏是時時的可無縫銜接，即橫屏加載橫屏樣式，豎屏加載豎屏樣式，

（二）js判斷橫屏還是豎屏

//判斷手機橫豎屏狀態(tài)：window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {if (window.orientation === 180 || window.orientation === 0) { console.log("豎屏");$(".codeIg_s").removeClass('vercreen');//取消橫屏樣式 } if (window.orientation === 90 || window.orientation === -90 ){ console.log("橫屏");$(".codeIg_s").addClass('vercreen');//添加橫屏樣式 } }, false);

備注：橫屏樣式在vercreen類名下修改原默認(rèn)樣式，可正常使用，缺點是必須有橫豎屏的切換狀態(tài)才會觸發(fā)。

?

如果用戶默認(rèn)是橫屏狀態(tài)時不會觸發(fā)橫屏條件判斷，只有用戶從橫屏轉(zhuǎn)為豎屏或者從豎屏轉(zhuǎn)為橫屏?xí)r才會觸發(fā)相應(yīng)條件判斷。

沒有切換狀態(tài)時會不執(zhí)行任何條件判斷，此處不如css判斷橫豎屏全面。

?

本文轉(zhuǎn)載于:猿2048?https://www.mk2048.com/blog/blog.php?id=0bj2abb&title=移動端判斷手機橫豎屏狀態(tài)

總結(jié)

以上是生活随笔為你收集整理的移动端判断手机横竖屏状态的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。