Question

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

Answer 1

为什么不使用javascript screen对象。你应该能够通过以下方式获得屏幕尺寸：

screen.height;
screen.width;

Answer 2

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

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

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

Answer 3

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

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

Answer 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

Answer 5

您可以收听调整大小事件，而不是收听 orientationchange 事件，而是确保window.innerHeight / outerHeight属性已更新。

Answer 6

分别试试window.innerWidth window.innerHeight; android可能并不是关于outerWidth和Height;

Answer 7

这很丑，但是可以。 Mobile viewport height after orientation change

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

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

7 个答案: