H5移動端橫豎屏切換監(jiān)聽
上一次說過了 H5移動端橫豎屏切換監(jiān)聽的寫法晃择。
橫豎屏監(jiān)聽代碼如下，這里就不做詳細(xì)說明了猎贴。完整說明
$(function(){//監(jiān)聽橫豎屏旋轉(zhuǎn)搁吓，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();//豎屏?xí)r執(zhí)行的函數(shù)
clearTimeout(timer);
},100);
}else{
portrait();
}
} else {
if(!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){
var timer = setTimeout(function(){
landscape();//橫屏?xí)r執(zhí)行的函數(shù)
clearTimeout(timer);
},100);
}else{
landscape();
}
}
}
現(xiàn)在說說在有橫豎屏監(jiān)聽時崭添，同時還有input 輸入框寓娩。
頁面在輸入時 容易的問題，如圖
問題
圖1 ios 系統(tǒng)輸入時
image.png
圖2 正常橫屏?xí)r的提示
image.png
圖3 Android 輸入時顯示的頁面
image.png
如圖所示，android 系統(tǒng)點(diǎn)擊input 輸入框時棘伴，整個輸入框是占據(jù)屏幕空間的寞埠，因此頁面會向上壓縮，導(dǎo)致了監(jiān)聽的橫豎屏的結(jié)果為橫屏狀態(tài)焊夸，出現(xiàn)了頁面提示仁连，導(dǎo)致無法輸入，影響頁面效果阱穗。
解決方法
在input 聚焦時饭冬，對于非ios 系統(tǒng)的設(shè)備，移除當(dāng)前頁面的橫豎屏監(jiān)聽揪阶〔伲可能還有其他更好的方法，后續(xù)有待研究...
$('input').focus(function(){
if (!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
}else{
window.removeEventListener("resize",onResize,false);
}
});
