移动端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、横屏终结版

综上。产生了横屏终结版。

代码例如以下：

(function(){
          var supportsOrientation = (typeof window.orientation == 'number' && typeof window.onorientationchange == 'object');    var HTMLNode = document.body.parentNode;    var updateOrientation = function() {
            // rewrite the function depending on what's supported      if(supportsOrientation) {        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. )          HTMLNode.setAttribute('class', orientation);        }      } else {        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. ) HTMLNode.setAttribute('class', orientation); } } updateOrientation(); } var init = function() {

// initialize the orientation updateOrientation(); if(supportsOrientation) { window.addEventListener('orientationchange', updateOrientation, false); } else { // fallback: update every 5 seconds setInterval(updateOrientation, 5000); } } window.addEventListener('DOMContentLoaded', init, false); })();

温馨提示: 1、假设移动端全部浏览器都失效，请检查手机屏幕旋转是否开启；2、假设仅仅有微信旋转失效。而在浏览器中打开正常，请打开微信的【开启横屏模式】；3、假设以上两条都无法解决。请检查人品。

5、參考资料

很多其它内容请查看

版权声明：本文博主原创文章，博客，未经同意不得转载。