HTML5判斷移動端橫屏豎屏功能
阿新 • • 發佈:2019-01-24
用CSS判斷橫屏豎屏問題:
</pre></p><p><pre name="code" class="html" style="font-weight: bold;"> @media (orientation: portrait) { } 橫屏 @media (orientation: landscape) { }豎屏 <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">橫屏 <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">豎屏
用JavaScript判斷橫屏豎屏問題:
//判斷手機橫豎屏狀態: function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert("豎屏狀態!") } if(window.orientation==90||window.orientation==-90){ alert("橫屏狀態!") } } window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false); //移動端的瀏覽器一般都支援window.orientation這個引數,通過這個引數可以判斷出手機是處在橫屏還是豎屏狀態。 從而根據實際需求而執行相應的程式。通過新增監聽事件onorientationchange,進行執行就可以了。
?