html5 判断手机横竖屏,移动端判断横竖屏的5种解决方案
说明：
如果横竖屏切换只是替换样式， 请用第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();
})
参考文章