说明：

如果横竖屏切换只是替换样式， 请用第4种，

如果横竖屏切换， 需要执行某些方法，最简单粗暴的就使用 第5种方式。【小米4c,微信浏览器，小米浏览器，360浏览器亲测没有问题】

温馨提示:

1、如果移动端所有浏览器都失效，请检查手机屏幕旋转是否开启；

2、如果只有微信旋转失效，而在浏览器中打开正常，请打开微信的【开启横屏模式】；

3、如果以上两条都无法解决，请检查人品。

移动端判断横竖屏切换，主要的五种方式

1. 浏览器自带事件 orientationchange

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. CSS样式的

@media all and (orientation: portrait) {

body div { width: 10%; }

}

@media all and (orientation: landscape) {

body div { width: 15%; }

}

3. 定时器判断页面宽高

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. 方法1 和 2 两种的结合， 因为1 存在兼容性问题，比如微信浏览器不触发， 那么就可以用定时器，判断CSS。

(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);

})();

5. 最简单粗暴的 onresize 事件【注意，不能加载 document 或者 body 上】，**必须加在 window对象上** ，因为 body 和 document 的大小可能因为HTML内容而变化， 这样会造成不必要的触发。

$(window).on('resize', function () {

fn_onResize();

})

参考文章