H5移动端横竖屏切换监听副作用——手机整屏状态下安卓机input 问题

最新推荐文章于 2024-03-22 17:10:09 发布

Aimee芊

最新推荐文章于 2024-03-22 17:10:09 发布

阅读量5.3k

点赞数 2

分类专栏：移动端H5开发前端大杂烩文章标签： ios android 移动横竖屏 input

本文链接：https://blog.csdn.net/Aimee1608/article/details/78625816

版权

移动端H5开发同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

前端大杂烩

13 篇文章 0 订阅

订阅专栏

H5移动端横竖屏切换监听

上一次说过了 H5移动端横竖屏切换监听的写法。

横竖屏监听代码如下，这里就不做详细说明了。完整说明

$(function(){//监听横竖屏旋转，ios 和 Android 写法不一样  
    onResize();  
    if (!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {  
        window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", onResize, false);  
    }else{  
        window.addEventListener( "resize", onResize, false);  
    }  
});  
  
function  onResize() {  
  
    if(Utils.isPortrait()){  
        if(!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){  
  
            var timer = setTimeout(function(){  
                portrait();//竖屏时执行的函数  
  
                clearTimeout(timer);  
            },100);  
        }else{  
            portrait();  
        }  
    } else {  
        if(!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){  
            var timer = setTimeout(function(){  
                landscape();//横屏时执行的函数  
                clearTimeout(timer);  
            },100);  
        }else{  
            landscape();  
        }  
    }  
}

现在说说在有横竖屏监听时，同时还有input 输入框。
页面在输入时容易的问题，如图

问题

图1 ios 系统输入时

图2 正常横屏时的提示

图3 Android 输入时显示的页面

如图所示，android 系统点击input 输入框时，整个输入框是占据屏幕空间的，因此页面会向上压缩，导致了监听的横竖屏的结果为横屏状态，出现了页面提示，导致无法输入，影响页面效果。

解决方法

在input 聚焦时，对于非ios 系统的设备，移除当前页面的横竖屏监听。可能还有其他更好的方法，后续有待研究…


$('input').focus(function(){
	    if (!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {	
	    }else{
	        window.removeEventListener("resize",onResize,false);
	    }
});