HTML5判斷移動端橫屏豎屏功能

用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,進行執行就可以了。

?
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章