javascript 如何为平板电脑和手机的Android设备在方向变化时获得正确的窗口宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10215894/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get the correct window width on orientation change for android devices both tablets and mobiles
提问by user850234
I am trying to calculate the window width on orientation change for android devices using jquery function $(window).outerWidth(true);. This calculation gives correct width on orientation change for both iphoneand ipadbut not in android. If i initially load the page in landscape mode or portrait mode i am getting the correct width but once i change the orientation after loading the page i am getting the width for portrait mode as was in landscape mode and vice versa. Please suggest what is happening and how can i handle this issue so that i get the correct window width on orientation change in android device
我正在尝试使用 jquery 函数计算 android 设备方向变化时的窗口宽度$(window).outerWidth(true);。这个计算给出了正确的方向变化宽度iphone，ipad但不是在 android 中。如果我最初以横向模式或纵向模式加载页面，我将获得正确的宽度，但是一旦我在加载页面后更改方向，我将获得纵向模式的宽度，反之亦然。请建议正在发生的事情以及我如何处理这个问题，以便我在 android 设备的方向改变时获得正确的窗口宽度
回答by slayton
Why not just use the javascript screenobject. you should be able to get the screen dimensions with :
为什么不直接使用 javascriptscreen对象。您应该能够通过以下方式获得屏幕尺寸：
screen.height;
screen.width;
回答by Shivang Gupta
I was also stuck in this problem and find the best solution which will work on all the platforms.Below is the code of 'orientationchange' event.
我也被这个问题困住了，并找到了适用于所有平台的最佳解决方案。下面是 'orientationchange' 事件的代码。
function onOrientationChange(event)
{
setTimeout(function(){
'Enter you code here';
},200);
}
Hope, it will help you and most of other too.. Cheers.
希望，它会帮助你和其他大多数人......干杯。
回答by CuriousGeorge
this post seems to have a solution that may be relevant to you:
这篇文章似乎有一个可能与您相关的解决方案：
http://forum.jquery.com/topic/orientationchange-event-returns-wrong-values-on-android
http://forum.jquery.com/topic/orientationchange-event-returns-wrong-values-on-android
回答by Ifeanyi Chukwu
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
回答by silver1991
Instead of listening to orientationchangeevent , you can listen to window resizeevent , it will make sure that window.innerHeight/outerHeight properties got updated.
您可以不收听orientationchange事件，而是收听窗口调整大小事件，它将确保window.innerHeight/outerHeight 属性得到更新。
回答by Bastien Robert
This is ugly, but it works. Mobile viewport height after orientation change
这很丑陋，但它有效。方向改变后的移动视口高度
window.addEventListener('orientationchange', () => {
const tmp = () => {
this.onResize()
window.removeEventListener('resize', tmp)
}
window.addEventListener('resize', tmp)
})
回答by d4rkpr1nc3
Try window.innerWidth, respectively, window.innerHeight; It is posible that android doesn't not about outerWidth and Height;
window.innerWidth分别尝试window.innerHeight; android 有可能与外层宽度和高度无关；
