窗户尺寸因方向而异

Window Dimensions different depending on Orientation

本文关键字：方向 窗户      更新时间：2023-09-26

所以我正在制作一个Web应用程序，它将使用metatags:从iphone的主屏幕运行

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="HandheldFriendly" content="true" />

我有这个javascript代码来处理方向更改：

var orientationChange = function(e){
    if(typeof mainContainer === 'undefined'){
        mainContainer = document.querySelector('.main-container');
    }
    alert(window.innerWidth + ' * ' + window.innerHeight);
};
window.addEventListener('orientationchange', orientationChange, false);
window.addEventListener('load', orientationChange, false);

当设备处于纵向模式时，我得到

320(w) * 460(h)

当设备处于横向模式时，我会得到

480(w) * 300(h)

为什么会发生这种情况
有没有办法保证我会得到一个一致的结果？

如果你只想根据特定的分辨率更改你的配置文件，你应该使用CSS：

 @media (min-width: 320px) { look one way... }
 @media (min-width: 240px) { look another way... }
相关文章：