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

【问题标题】：How to get the correct window width on orientation change for android devices both tablets and mobiles如何在平板电脑和手机的 Android 设备的方向更改时获得正确的窗口宽度
【发布时间】：2012-04-18 18:44:59
【问题描述】：

我正在尝试使用 jquery 函数$(window).outerWidth(true); 计算 android 设备的方向更改时的窗口宽度。该计算为iphone 和ipad 提供了正确的方向变化宽度，但在android 中没有。如果我最初以横向模式或纵向模式加载页面，我将获得正确的宽度，但是一旦我在加载页面后更改方向，我将获得纵向模式的宽度，就像在横向模式下一样，反之亦然。请建议正在发生的事情以及我该如何处理这个问题，以便我在 android 设备中获得正确的方向更改窗口宽度

【问题讨论】：

Android 中存在一个问题，有时需要几秒钟才能更改数字。我不熟悉您使用的平台，但在 c++ 中，解决方案是在方向更改后重复轮询几帧。

标签： javascript jquery android orientation galaxy

【解决方案1】：

为什么不直接使用 javascript screen 对象。您应该能够获得屏幕尺寸：

screen.height;
screen.width;

【讨论】：

我使用$(window).outerWidth(true); 作为包括桌面在内的所有设备的通用，因为我还需要检查浏览器调整大小。如果我使用上述方法，那么我需要专门检查 android 设备。仍然会检查您的答案，但为什么 jquery 函数没有给出正确的结果。安卓设备会发生什么
我认为更可靠的方法可能是 screen.availWidth 和 screen.availHeigh 忽略搜索栏和浏览器内容

【解决方案2】：

我也陷入了这个问题，并找到了适用于所有平台的最佳解决方案。下面是“orientationchange”事件的代码。

function onOrientationChange(event)
{
    setTimeout(function(){
       'Enter you code here';
    },200);
}

希望，它会帮助你和其他大多数人......干杯。

【讨论】：

【解决方案3】：

这篇文章似乎有一个可能与您相关的解决方案：

http://forum.jquery.com/topic/orientationchange-event-returns-wrong-values-on-android

【讨论】：

【解决方案4】：

                            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

【讨论】：

【解决方案5】：

除了监听 orientationchange 事件，您可以监听 window resize 事件，它会确保 window.innerHeight/outerHeight 属性得到更新。

【讨论】：

在我的情况下 window.innerWidth 在方向更改触发调整大小事件后没有更新
这是不正确的。使用window.addEventListener('resize'时大小还是不对

【解决方案6】：

分别尝试window.innerWidth，window.innerHeight；有可能android不关心outerWidth和Height；

【讨论】：

【解决方案7】：

这很丑陋，但它有效。 Mobile viewport height after orientation change

window.addEventListener('orientationchange', () => {
  const tmp = () => {
    this.onResize()
    window.removeEventListener('resize', tmp)
  }
  window.addEventListener('resize', tmp)
})

【讨论】：