我正在尝试使用 jquery 函数 $(window).outerWidth(true);
计算 android 设备方向更改的窗口宽度。此计算为iphone
和ipad
的方向更改提供了正确的宽度,但在 android 中则不然。如果我最初以横向模式或纵向模式加载页面,我会得到正确的宽度,但是一旦我在加载页面后更改方向,我就会像在横向模式下一样获得纵向模式的宽度,反之亦然。请建议正在发生的事情以及我如何处理此问题,以便我在 android 设备中方向更改时获得正确的窗口宽度
为什么不直接使用 javascript screen
对象。 您应该能够通过以下方式获取屏幕尺寸:
screen.height;
screen.width;
我也陷入了这个问题,并找到了适用于所有平台的最佳解决方案。下面是"方向更改"事件的代码。
function onOrientationChange(event)
{
setTimeout(function(){
'Enter you code here';
},200);
}
希望,它会帮助你和大多数人。干杯。
似乎有一个可能与您相关的解决方案:
http://forum.jquery.com/topic/orientationchange-event-returns-wrong-values-on-android
var isMobile = {
Android: function () {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function () {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function () {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function () {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function () {
return navigator.userAgent.match(/IEMobile/i);
},
webOS: function () {
return navigator.userAgent.match(/webOS/i);
},
any: function () {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
var tell_if_mobile;
var mobile_tablet;
if (isMobile.any()) {
tell_if_mobile = true;
} else {
tell_if_mobile = false;
var windowWidth = window.screen.width < window.outerWidth ?
window.screen.width : window.outerWidth;
tell_if_mobile = windowWidth < 800;
mobile_tablet = windowWidth >= 500 ? "Tablet/Phablet Device" : "Desktop View (Mobile)";
}
var mobile_type;
mobile_type = isMobile.Android() ? "Android Device" :
isMobile.BlackBerry() ? "Blackberry Device" :
isMobile.iOS() ? "iOS Device" :
isMobile.Opera() ? "Opera Mobile/Mini" :
isMobile.Windows() ? "IEMobile" :
isMobile.webOS() ? "webOS device" :
tell_if_mobile == true ? mobile_tablet :
"Not a mobile device";
alert(mobile_type); //result
与其监听方向变化事件,不如监听窗口调整大小事件,它将确保 window.innerHeight/outerHeight 属性得到更新。
分别尝试window.innerWidth
window.innerHeight
;Android可能不涉及外部宽度和高度;
这很丑陋,但它有效。方向更改后的移动视口高度
window.addEventListener('orientationchange', () => {
const tmp = () => {
this.onResize()
window.removeEventListener('resize', tmp)
}
window.addEventListener('resize', tmp)
})