Как получить размер окна полноэкранного (минимального-ui) представления, если он не включен в полноэкранный режим?

Ответ 1

Чтобы уточнить, window.screen.availHeight отражает максимальную высоту окна браузера, включая все панели инструментов. Если вы посмотрите на рисунок ниже, вы увидите, что 548 - это просто высота всего браузера, без меню iOS. Таким образом, свойство availHeight не должно показывать доступное пространство для содержимого, но весь браузер. Он используется для настольных браузеров, чтобы обнаружить такие вещи, как браузер, максимизирован или нет, путем проверки window.outerHeight на window.screen.availHeight.

Но о получении минимальной высоты пользовательского интерфейса, прямо перед тем, как попасть в нее. Нет стандартного свойства в spec для него, поскольку это просто поведение только для iOS. Apple может поставить некоторые нестандартные свойства, чтобы разоблачить эту информацию. Но поскольку я проверил объекты window и window.screen, там ничего не связано. Это для возможности, на данный момент.

В качестве опоры, в чем разница между знанием нового размера видового экрана с событием resize и знанием предполагаемого размера заранее? Объем работы, который может быть выполнен до события resize, всегда должен быть минимальным, и если произойдет изменение макета, это должно произойти после изменения размера. Итак, зная цифры заранее, это не должно сильно помочь.

Рассмотрим этот сценарий, когда пользователь открывает веб-страницу и начинает прокрутку немедленно. Если мы знаем цифры раньше, мы ничего не можем сделать для первоначальной визуализации экрана, так как это не минимальный пользовательский интерфейс. Независимо от того, что должно быть сделано, нужно начинать сразу после запуска прокрутки пользователя.

Теперь помимо этого есть еще одно событие изменения размера, которое просто выглядит как минимальное ui. На iPad, когда у вас более одной вкладки, высота уменьшается немного больше, чтобы отобразить вкладки. Таким образом, когда пользователь закрывает единственную другую вкладку, текущая страница становится немного выше и запускает событие изменения размера. Но эта новая высота отличается от высоты минимального пользовательского интерфейса. Это говорит о том, что этот минимальный ui является просто еще одним повышением высоты, а не полноэкранным API-интерфейсом.

Итак, если страница зависит от высоты, существует слишком много возможных изменений, которые нужно учитывать. Жесткое кодирование будет всего лишь краткосрочным решением, в один прекрасный день вы не сможете протестировать все эти устройства.

Но я также должен сказать, что есть недостаток в событии изменения размера, он запускается после попадания в минимальный ui, что может быть слишком поздно. Итак, когда высота начинает расти, нет никакого события, чтобы знать об этом. Это, где я считаю, что некоторые пользовательские интерфейсные интерфейсы могут потребоваться для запуска анимации для изменения размеров. В этом случае, чтобы узнать о начале этого события, можно использовать проверку интервала на innerHeight, которая начнет немедленно меняться.

В любом случае, если есть необходимая информация о значении номеров заранее прокрутки, я считаю, что она недоступна через CSSOM.

Edit:

Обнаружение минимального ui - это еще одна вещь, которая не знает размеров. Используя события Touch, вы можете определить, ввел ли представление минимальный пользовательский интерфейс или нет.

Проверка событий innerHeight in touchstart, touchmove и touchend может помочь обнаружить минимальный ui. Наивный подход состоит в том, чтобы проверить, увеличился или не достигнут ли в конце касания внутреннийHeight. Это будет работать в большинстве случаев, но у него есть проблема, если пользователь перестает касаться прямо в середине перехода минимального минимума, мы не можем быть уверены, что мы введем минимальный пользовательский интерфейс. Проверка против последней сообщенной высоты на touchmove может помочь проверить, вернемся ли мы к представлению по умолчанию.

В любом случае, вы можете проверить код ниже, чтобы узнать, как он работает. У него есть ошибки, и их можно улучшить, но вы получите эту идею. Я не помещал его в кодировщик, так как вы не могли прокручивать всю страницу там.

<!doctype html>
<html>
    <head>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">
        <style>
        div {
            position: fixed;
            left: 10px;
        }
        #dd1 {
            top: 10px;
        }
        #dd2 {
            top:30px;
        }
        #dd3 {
            top: 50px;
        }
        </style>
    <body>
        <div id="dd1">Start: <span id="d1"></span></div>
        <div id="dd2">Move: <span id="d2"></span></div>
        <div id="dd3">End: <span id="d3"></span></div>
        <section style="position:relative;height:3000px;"></section>
        <script>
        var d1 = document.querySelector("#d1");
        var d2 = document.querySelector("#d2");
        var d3 = document.querySelector("#d3");
        var start_height=window.innerHeight;
        var cur_height;
        var end_height;
        var normal_state=true;
        var entered_minimal_ui=false;
        //window.addEventListener("touchstart", start_handler, false);
        window.addEventListener("touchmove", move_handler, false);
        window.addEventListener("touchend", end_handler, false);
        document.ontouchstart = control_touching;
        d1.textContent=start_height;

        function move_handler() {
            if(cur_height>start_height) {
                // we *may* enter the minimal-ui, but it not final yet
                d2.textContent="I detected minimal-ui faster. (Current: "+cur_height+")";
                normal_state=false;
            }
            cur_height=window.innerHeight;
        }
        function end_handler() {
            end_height=window.innerHeight;

            if(end_height>start_height && end_height>=cur_height) {
                d3.textContent="Hello minimal-ui. (End: "+end_height+")";
                normal_state=false;
                entered_minimal_ui=true;
            }
            else if(!entered_minimal_ui) {
                d3.textContent="We didn't enter minimal-ui. Reverting.";
                normal_state=true;
            }
        }
        function control_touching() {
            document.ontouchstart = function(e){ 
                if(normal_state) {
                    return true;
                }
                else // just for testing
                    e.preventDefault();
            }
        }
        </script>
    </body>
</html>

Литература:

• Иллюстрация из iPhone 5 Размер экрана и советы по веб-дизайну статьи Кайла Ларсона.