(function(){
var supportOrientation = (typeof window.orientation === 'number' &&
typeof window.onorientationchange === 'object');//判断是否支持orientation 这个属性
var init = function(){
var htmlNode = document.body.parentNode,
orientation;
var updateOrientation = function(){
if(supportOrientation){
orientation = window.orientation;
switch(orientation){
case 90:
case -90:
orientation = 'landscape';//横屏
break;
default:
orientation = 'portrait';//竖屏
break;
}
}else{
orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait';//解决兼容性问题
}
htmlNode.setAttribute('class',orientation);
};
if(supportOrientation){
window.addEventListener('orientationchange',updateOrientation,false);
}else{
//监听resize事件
window.addEventListener('resize',updateOrientation,false);
}
updateOrientation();
};
window.addEventListener('DOMContentLoaded',init,false);
})();
判断竖屏还是横屏
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 移动端的浏览器一般都支持 window.orientation 这个参数,通过这个参数可以判断出手机是处在横屏还是...
- 用CSS判断横屏竖屏问题: @media (orientation:portrait) { } 横屏 @media...
- 最近最的一个移动网页端h5项目需求如下:当进入某个指定页面时,如果手机当时是竖屏,则提示横屏显示;在这个页面时,若...
- 感觉每年的七八月份都是很忙很忙的季节,烈日炎炎,一个月没有写自己总结了,感觉有点手生,赶紧看一场里约奥运会马拉松压...