禁用用戶自動縮放功能：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
判斷橫豎屏狀態有兩種方法：css判斷、js判斷
(一)、css判斷橫屏還是豎屏
1、寫在同一個css文件中
@media screen and (orientation: portrait) { /*豎屏 css*/} @media screen and (orientation: landscape) { /*橫屏 css*/}根據橫豎屏設置大小時，正常頁面尺寸常規書寫即可，橫屏樣式單獨設置。即只需在原有樣式基礎上添加橫屏樣式即可，
@media screen and (orientation: landscape) { /*橫屏 css*/}當用戶橫屏時加載橫屏樣式，豎屏時取消橫屏樣式即加載默認樣式。
2、分開寫在兩個css中，根據橫豎屏引用不同樣式文件：
根據橫豎屏引用不同樣式文件
橫屏：
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" rel="external nofollow" >
豎屏：
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" rel="external nofollow" >
備注：css判斷橫豎屏是時時的可無縫銜接，即橫屏加載橫屏樣式，豎屏加載豎屏樣式，
（二）js判斷橫屏還是豎屏
//判斷手機橫豎屏狀態： 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類名下修改原默認樣式，可正常使用，缺點是必須有橫豎屏的切換狀態才會觸發。
如果用戶默認是橫屏狀態時不會觸發橫屏條件判斷，只有用戶從橫屏轉為豎屏或者從豎屏轉為橫屏時才會觸發相應條件判斷。
沒有切換狀態時會不執行任何條件判斷，此處不如css判斷橫豎屏全面。
總結
以上所述是小編給大家介紹的使用JS判斷移動端手機橫豎屏狀態，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
