微通道横屏的问题
移动端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、參考资料
很多其它内容请查看zakwu的小站
版权声明:本文博主原创文章,博客,未经同意不得转载。