横屏问题

布满荆棘的人生 2022-08-19 01:50 387阅读 0赞

移动端html开发，我们常会用到横竖屏的判断做一些事情，比如说播放视频的时候时常使用横竖屏切来切换居中显示和全屏显示，如果你无数次尝试都失败了，请你看到最后，有惊喜哦！！。

一般来说，横竖屏的检测方式有以下几种：

### 一、使用浏览器自带的事件 ###

使用浏览器自带事件orientationchange和浏览器对象window.orientation可以完美进行横竖屏幕切换。根据参考资料一，此事件在有些浏览器中使用绑定在body元素上的属性来实现，只有在页面发生css重排后才会被触发。解决此问题的方法是在body上增加一个css类，用来触发css的重排，具体css代码如下：

.portrait body div { width: 10%; } .landscape body div { width: 15%; }

调用事件代码如下：

var updateOrientation = function() { var orientation = window.orientation; switch(orientation) { case 90: case -90: orientation = 'landscape'; break; default: orientation = 'portrait'; } // set the class on the HTML element (i.e. ) document.body.parentNode.setAttribute('class', orientation); }; // event triggered every 90 degrees of rotation window.addEventListener('orientationchange', updateOrientation, false);

### 2、使用媒体查询（media query） ###

媒体查询里面中有横竖屏幕的检测，orientation: portrait(竖)/landscape(横)，媒体查询该属性的生效系统版本为：iOS 3.2+, Android 2.0+和一些其他浏览器。 具体代码如下：

@media all and (orientation: portrait) { body div { width: 10%; } } @media all and (orientation: landscape) { body div { width: 15%; } }

### 3、使用定时器，定期检测当前页面的长宽 ###

此种方法通过定时检测当前页面的长宽，通过对比长宽，对其进行判断，根据判断结果模拟页面的横竖屏，此方法性能堪忧，主要用于以上1,2均不支持的浏览器或者手机。废话少说，上代码。

var updateOrientation = function() { // landscape when width is biggest, otherwise portrait var orientation = (window.innerWidth > window.innerHeight) ? 'landscape': 'portrait'; // set the class on the HTML element (i.e. ) document.body.parentNode.setAttribute('class', orientation); }; // initialize the orientation updateOrientation(); // update every 5 seconds setInterval(updateOrientation, 5000);

### 4、横屏终结版 ###

综上，产生了横屏终结版。代码如下：

源引：http://zakwu.me/2015/06/03/shou-ji-shu-ping-pan-duan-han-shu/