javascript - 在具有静态屏幕尺寸的设备上检测移动屏幕方向，无论屏幕方向如何

Question

我目前正在构建一个投资组合网站，这将受益于将网站布局更改为一栏或两栏设计，具体取决于移动浏览器的屏幕方向。我最初尝试使用@media (orientation:portrait)and @media (orientation:landscape)，但发现我的 Galaxy Note 8 只会触发横向模式，即使手机处于纵向模式也是如此。然后我蛮力强制一个JS解决方案，如下所示：

        <link rel="stylesheet" type="text/css" href="mobileportrait.css" id="portrait" />
        <link rel="stylesheet" type="text/css" href="mobilelandscape.css" id="landscape" />
        <script type="text/javascript">
            if (screen.height <= screen.width) {
                document.getElementById('landscape').disabled = false;
                document.getElementById('portrait').disabled = true;
            }
            else {
                document.getElementById('landscape').disabled = true;
                document.getElementById('portrait').disabled = false;
            }
            window.addEventListener('resize', function(event){
                if (screen.height <= screen.width) {
                document.getElementById('landscape').disabled = false;
                document.getElementById('portrait').disabled = true;
                }
                else {
                    document.getElementById('landscape').disabled = true;
                    document.getElementById('portrait').disabled = false;
                } 
            });
        </script>

但即使这样也只会在我尝试过的所有手机上加载横向样式表。这使我相信，无论屏幕的实际方向如何，我所针对的现代手机都将最长边报告为屏幕宽度，将最短边报告为屏幕高度，这导致 CSSorientation和 JSscreen.height <= screen.width都惨遭失败。

我的问题很简单，如何检测以这种方式运行的手机的方向？

标签： javascripthtmlcssmobile