WEB开发中的横竖屏问题
1.onresize兼容性及表现
1)chrome新版
屏幕旋转一次只会调用一次;屏幕放大或缩小偶然调用N次,N取决于缩放比例
事件绑定方式:
//一级事件绑定可以使用
window.onresize = function () {
alert(Math.random());
}
//二级事件绑定可以使用
window.addEventListener("resize", hengshuping, false);
复制代码
2)安卓6.0及以上
屏幕旋转一次只会调用一次;屏幕放大或缩小不会调用
事件绑定方式:
//一级事件绑定可以使用
window.onresize = function () {
alert(Math.random());
}
//二级事件绑定可以使用
window.addEventListener("resize", hengshuping, false);
复制代码
3)iOS10及以上
屏幕旋转一次只会调用两次(窃以为是iOS系统的bug);屏幕放大或缩小不会调用
事件绑定方式:
//一级事件绑定可以使用
window.onresize = function () {
alert(Math.random());
}
//二级事件绑定可以使用
window.addEventListener("resize", hengshuping, false);
复制代码
2.onorientationchange兼容性及表现(onorientationchange与屏幕缩放无关)
1)chrome新版
屏幕旋转一次只会调用一次,很奇怪的是原型链中有ononorientationchange方法,却只能通过二级事件绑定有效,Dom 0级绑定无效(窃以为是chrome的bug)
事件绑定方式:
// 没有作用
window.onorientationchange = function () {
alert(Math.random());
}
// 可以使用
window.addEventListener("orientationchange", hengshuping, false);
复制代码
2)安卓6.0及以上
屏幕旋转一次只会调用一次
事件绑定方式:
// 可以作用
window.onorientationchange = function () {
alert(Math.random());
}
// 可以使用
window.addEventListener("orientationchange", hengshuping, false);
复制代码
3)iOS10及以上
同上
3.onresize和onorientationchange in window
1)chrome浏览器
"onorientationchange" in window =>false
"onrisize" in window =>true
复制代码
2)安卓&iOS
"onorientationchange" in window =>true
"onrisize" in window =>true
复制代码
4.PC段监听旋转代码实现
//方式一
//一级事件绑定可以使用
window.onresize = function () {
alert(Math.random());
}
//方式二
//二级事件绑定可以使用
window.addEventListener("resize", hengshuping, false);
//方式三
//一级事件绑定不能使用 不能使用不能使用不能使用!!!!!!!!!!!!!!!!!!!!!
window.onorientationchange = function () {
alert(Math.random());
}
//二级事件绑定可以使用
window.addEventListener("orientationchange", hengshuping, false);
复制代码
5.PC段监听缩放代码实现
//方式一
//一级事件绑定可以使用
window.onresize = function () {
alert(Math.random());
}
//方式二
//二级事件绑定可以使用
window.addEventListener("resize", hengshuping, false);
复制代码
6.移动端监听旋转代码实现
onresize在iOS中监听旋转回掉函数会执行两次,不推荐使用,如果非要使用,可以下二选一
//方式一
window.onresize = function () {
alert(Math.random());
}
//方式二
window.addEventListener("resize", hengshuping, false);
复制代码
onorientationchange更适合移动端旋转监听,以下二选一
//方式一
window.onorientationchange = function () {
alert(Math.random());
}
//方式二
window.addEventListener("orientationchange", hengshuping, false);
复制代码
为防止老版本的移动端不支持onorientationchange,完善后的移动端旋转监听代码如下,百试很爽
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
function hengshuping() {
if (window.orientation == 0) {
alert('横屏');
}
if (window.orientation == 90 || window.orientation == -90) {
alert('竖屏');
}
}
复制代码
注①:window.orientation实测只有三个-90 0 90三个取值,网上写的window.orientation == 180,都是文章抄来抄去瞎几把写的; 注②:所有代码理论上不兼容ie6789,没办法,我不爱用ie;
7.下期预告:JavaScript零级 二级 三级 事件绑定机制探究......
我叫刘大洋!移动端更多奇技淫巧敬请期待.....