js判断手机的横竖屏调整样式

在移动端，我们经常遇到横竖屏的问题，所以我们改如何判断或针对横竖屏来写代码呢。首先需要在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.