HTML5中判斷橫屏豎屏

在移動端中我們經常碰到橫屏豎屏的問題，那麼我們應該如何去判斷或者針對橫屏、豎屏來寫不同的**呢。

首先在head中加入如下**：

<metaname="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中1

@mediascreenand (orientation:portrait)

@mediascreenand (orientation:landscape)

分開寫在2個css中豎屏1

<linkrel="stylesheet"media="all and (orientation:portrait)"href="portrait.css">

橫屏1

<linkrel="stylesheet"media="all and (orientation:landscape)"href="landscape.css">

0102

//判斷手機橫豎屏狀態：

window.addeventlistener("onorientationchange"inwindow ?"orientationchange":"resize",function()

if(window.orientation === 90 || window.orientation === -90 )

},false);

//移動端的瀏覽器一般都支援window.orientation這個引數，通過這個引數可以判斷出手機是處在橫屏還是豎屏狀態。