在移動端中我們經常碰到橫屏豎屏的問題，那么我們應該如何去判斷或者針對橫屏、豎屏來寫不同的代碼呢。
首先在head中加入如下代碼：
|
1
|
<
meta
name
=
"viewport"
content
=
"width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
|
針對上述viewport標簽有如下說明
1)、content中的width指的是虛擬窗口的寬度。
2)、user-scalable=no就一定可以保證頁面不可以縮放嗎？NO，有些瀏覽器不吃這一套，還有一招就是minimum-scale=1.0, maximum-scale=1.0 最大與最小縮放比例都設為1.0就可以了。
3)、initial-scale=1.0 初始縮放比例受user-scalable控制嗎？不一定，有些瀏覽器會將user-scalable理解為用戶手動縮放，如果user-scalable=no，initial-scale將無法生效。
4)、手機頁面可以觸摸移動，但是如果有需要禁止此操作，就是頁面寬度等於屏幕寬度是頁面正好適應屏幕才可以保證頁面不能移動。
5)、如果頁面是經過縮小適應屏幕寬度的，會出現一個問題，當文本框被激活（獲取焦點）時，頁面會放大至原來尺寸。
一：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判斷橫屏豎屏
|
01
02
03
04
05
06
07
08
09
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這個參數，通過這個參數可以判斷出手機是處在橫屏還是豎屏狀態。
|