在移動端，我們經常遇到橫豎屏的問題，所以我們改如何判斷或針對橫豎屏來寫代碼呢。首先需要在head中加入如下代碼：
<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中
css代碼：
@media screen and (orientation:portrait){
//豎屏css
}
@media screen and (orientation:landscape){
//橫屏css
}
注：css3媒體查詢orientation
語法：orientation : portrait | landscape
取值： portrait:指定輸出設備中的頁面可見區域高度大於或等於寬度 //豎屏模式
landscape:除portrait值情況外，都是landsscape
參考：http://www.w3chtml.com/css3/properties/madia-queries/orientation.html
分開寫在2個css中
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"/> //豎屏
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"/> //橫屏
二：js判斷橫豎屏
window.addEventListener("onorientationchange" in window? "orientationchange":"resize",function(){
setTimeout(function(){
if(window.orientation===0 || window.orientation===180){
alert('豎屏模式')
}
if(window.orientation===90 || window.orientation===-90){
alert("橫屏模式")
}
},300)
}，false);
注：orientationchange的兼容性
移動端webapp監測屏幕旋轉時時常用onorientationchange事件，用此事件獲取改變后的屏幕尺寸需要注意：
1）.iphone,可立即獲取改變后的屏幕尺寸。
2）.android,獲取的尺寸是改變前的。需要設置setTimeout在一段時間后再獲取。iScroll4是200ms,建議設成300ms.