您當(dāng)前位置：圖趣網(wǎng)（Tuquu） >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 移動(dòng)前端 >> 瀏覽設(shè)計(jì)教程

HTML5中判斷橫屏豎屏的方法移動(dòng)端

2016/12/30 9:41:24來(lái)源：互聯(lián)網(wǎng)

在移動(dòng)端中我們經(jīng)常遇到橫屏豎屏的題目，那么我們應(yīng)該如何去判斷或者針對(duì)橫屏、豎屏來(lái)寫不同的代碼呢。

這里有兩種方法：

一：CSS判斷橫屏豎屏

寫在統(tǒng)一個(gè)CSS中

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. @media screen and (orientation: portrait) {   
  2.   /*豎屏 css*/   
  3. }    
  4. @media screen and (orientation: landscape) {   
  5.   /*橫屏 css*/   
  6. }  

分開(kāi)寫在2個(gè)CSS中

豎屏

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">   

橫屏

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">   

二：JS判斷橫屏豎屏

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. //判斷手機(jī)橫豎屏狀況：   
  2. window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {   
  3.         if (window.orientation === 180 || window.orientation === 0) {    
  4.             alert('豎屏狀況！');   
  5.         }    
  6.         if (window.orientation === 90 || window.orientation === -90 ){    
  7.             alert('橫屏狀況！');   
  8.         }     
  9.     }, false);   

//移動(dòng)端的欣賞器一樣平常都支持window.orientation這個(gè)參數(shù)，通過(guò)這個(gè)參數(shù)可以判斷出手機(jī)是處在橫屏照舊豎屏狀況。

屏幕方向?qū)?yīng)的window.orientation值：

ipad,iphone： 90 或 -90 橫屏
ipad,iphone： 0 或180 豎屏
Andriod：0 或180 橫屏
Andriod： 90 或 -90 豎屏

[教程作者：佚名]
關(guān)鍵詞：判斷 方法 移動(dòng)
免責(zé)聲明：本站文章系圖趣網(wǎng)整理發(fā)布，如需轉(zhuǎn)載，請(qǐng)注明出處，素材資料僅供個(gè)人學(xué)習(xí)與參考，請(qǐng)勿用于商業(yè)用途！
本文地址：http://m.likemindfilms.com/tutorial/wd3360.html
巧用HTML5給按鈕背景設(shè)計(jì)不同的動(dòng)畫簡(jiǎn)單實(shí)例
Html5元素及基本語(yǔ)法詳解
圖趣網(wǎng)微信
建議反饋
×