Блог

В настоящее время я создаю веб-сайт с портфолио, который выиграет от изменения макета сайта на дизайн с одной или двумя колонками в зависимости от ориентации экрана для мобильных браузеров. Сначала я попытался использовать @media (orientation:portrait) и @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>
 

Но даже это загружает только таблицу стилей ландшафта на всех телефонах, с которыми я ее пробовал. Это наводит меня на мысль, что современные мобильные телефоны, на которые я нацеливаюсь, сообщают о самой длинной стороне как о ширине экрана, а о самой короткой стороне как о высоте экрана, независимо от фактической ориентации экрана, что приводит к тому, что CSS orientation и JS screen.height <= screen.width с треском выходят из строя.

Мой вопрос прост: как определить ориентацию мобильного телефона, который действует таким образом?