JS检测移动终端横竖屏代码

用媒体判断屏幕宽度的问题：

我旋转屏幕的时候Ios工作，安卓没有反应，横屏显示的是我竖屏的风格。

检查数据后，如果css3 media想要在移动终端上有更好的显示效果，就需要把这个代码添加到页首。

meta name=' viewport ' content=' width=device-width，initial-scale=1.0，maximum-scale=1.0，user-scalable=no '，但是我不能用这个代码。因为我的页面被改编了。您可以根据屏幕大小显示字体大小和样式大小。如果我添加这个代码，我的改编将不起作用。所以用其他方法。

解决方法：

移动设备提供了一个事件：orientationChange事件。

此活动由苹果添加到safari中。以便开发者可以确定用户何时将设备从横向视图切换到纵向视图模式。

该事件在设备旋转时触发。

//侦听方向变化swindow . addeventlistener(' orientonchange '，function() {//通告新的方向号alert(window . orientation)；}，false)；每当用户更改设备的查看模式时，都会触发OrientationChange事件。此时的事件对象不包含任何有价值的信息，

因为唯一相关的信息可以通过window.orientation获取

方向属性

它有三个值：0，90和-90。

0表示纵向模式，-90表示设备横向旋转到右侧横向模式，90表示设备横向旋转到左侧横向模式。

另一个是180，表示垂直屏幕，但为倒置垂直屏幕模式。但是这种模式还没有得到支持。

如图所示：

因此，通过将这个orientationChange事件与窗口的orientation属性相结合，我们可以更好地判断设备是处于横向还是纵向。

(function(){ var init=function(){ var updateOrientation=function(){ var orientation=window . orientation；开关(方向){ case 90: case-90:方向='横向'；//这里是横线休整；default:orientation=“纵向”；//这是垂直分屏；}//html根据不同的旋转状态，添加不同的类，横向和纵向//纵向document . body . parent node . set attribute(' class '，orientation)；};//每次旋转时调用此事件。window . addeventlistener(' orientation change '，updateOrientation，false)；//事件的初始化更新方向()；};window . addeventlistener(' DOMContentLoaded '，init，false)；})();因此，类可以根据不同的旋转状态来添加，所以我们的css可以这样写。

/* *垂直屏幕主体显示红色* */。人像身体div {背景：红色；}/* *横屏体显示蓝色* */。景观车身div {背景：蓝色；}另一种写作方式是使用媒体查询。

@media all and (orientation:人像){ body div { background: red} } @ media all and(orientation : landscape){ body div { background : blue；}}这种定向媒体查询在ios3.2、Android 2.0等浏览器上都能正常工作。

相对来说，这种代码稍微简洁一点。上面有js css，这段代码是纯css。当设备旋转时，会根据设备旋转的方向调用改变方向的css。

和睦相处

某些设备不提供orientationchange事件，但不触发窗口的调整大小事件。而媒体查询不支持，怎么办？

可以通过调整大小事件来判断。使用innerWidth和innerHeight，您可以检索屏幕大小。根据宽度和高度的比较，宽度小于高度的是竖屏，而宽度和高度是横屏。

代码如下：

(function(){ var updateOrientation=function(){ var orientation=(window。内宽窗。内部高度)？风景' : '人像；文件。尸体。ParentNode。SetAttribute(' class '，方向)；};var init=function(){ updateOrientation()；//监听调整大小事件窗户。addeventlistener(' resize '，updateOrientation，false)；};窗户。addeventlistener(' DOMContentLoaded '，init，false)；})();这样，我们就可以在浏览器中看到屏幕旋转带来样式的变化了。

两种检测方法的结合，代码如下：

(函数(){ var支持方向=(窗口类型。方向=='数字'类型的窗口。onoorientstatuschange==' object ')；var init=function(){ var html node=document。尸体。父节点，orientation var updateOrientation=function(){ if(支持方向){ orientation=window。定向；开关（方向){案例90:案例-90:方向='横向；打破；default:orientation="纵向";打破；} } else { orientation=(window。内宽窗。内部高度)？风景' : '人像；}htmlNode.setAttribute('class '，orientation)；};if(支持方向){ window。addeventlistener('方向更改'，updateOrientation，false)；}else{//监听调整大小事件窗户。addeventlistener(' resize '，updateOrientation，false)；} updateOrientation()；};窗户。addeventlistener(' DOMContentLoaded '，init，false)；})();利用这个方法，就可以解决掉烦人的移动端设备横竖屏的检测了。