此文轉載自：http://www.cnblogs.com/qqziyuan8/p/5735884.html，僅供本人學習參考，版權歸原作者所有！
HTML5中判斷橫屏豎屏
在移動端中我們經常碰到橫屏豎屏的問題，那么我們應該如何去判斷或者針對橫屏、豎屏來寫不同的代碼呢。
這里有兩種方法：
一：CSS判斷橫屏豎屏
寫在同一個CSS中
|
1
2
3
4
5
6
|
@media
screen
and (orientation:
portrait
) {
/*豎屏 css*/
}
@media
screen
and (orientation:
landscape
) {
/*橫屏 css*/
}
|
分開寫在2個CSS中
豎屏
|
1
|
<
link
rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
|
橫屏
|
1
|
<
link
rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
|
二：JS判斷橫屏豎屏
|
1
2
3
4
5
6
7
8
9
10
|
//判斷手機橫豎屏狀態：
window.addEventListener(
"onorientationchange"
in
window ?
"orientationchange"
:
"resize"
,
function
() {
if
(window.orientation === 180 || window.orientation === 0) {
alert(
'豎屏狀態！'
);
}
if
(window.orientation === 90 || window.orientation === -90 ){
alert(
'橫屏狀態！'
);
}
},
false
);
//移動端的瀏覽器一般都支持window.orientation這個參數，通過這個參數可以判斷出手機是處在橫屏還是豎屏狀態。
|
屏幕方向對應的window.orientation值：
ipad,iphone： 90 或 -90 橫屏
ipad,iphone： 0 或180 豎屏
Andriod：0 或180 橫屏
Andriod： 90 或 -90 豎屏