如何在平板电脑和手机的Android设备的方向更改中获得正确的窗口宽度

How to get the correct window width on orientation change for android devices both tablets and mobiles

本文关键字：窗口 方向 平板电脑 手机 Android      更新时间：2023-09-26

我正在尝试使用 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)
})
相关文章：