Головная боль полноэкранного веб-сайта iPhone - PullRequest
Новая
       5

Головная боль полноэкранного веб-сайта iPhone

0 голосов
/ 29 февраля 2012

Я создаю веб-страницу, которая имеет «полноэкранный режим». Это обычная веб-страница, пока вы не нажмете кнопку, а затем будет создан div, имеющий 100% высоту и ширину, а старый контент скрыт. В полноэкранном режиме предусмотрена еще одна кнопка для возврата в не полноэкранный режим, который скрывает div и отображает исходный контент.

Это прекрасно работает, за исключением того, что я также хочу скрыть хром браузера с помощью этого метода JavaScript: 

        setTimeout(function() { 
        window.scrollTo(0, 1) }, 
        100);

JavaScript прокручивает страницу достаточно, чтобы браузер Chrome больше не был виден. Проблема в том, что для этого требуется, чтобы страница была выше окна просмотра, чтобы ее можно было прокручивать. Если содержание имеет высоту 100%, это не может произойти.

Мой текущий обходной путь - добавить отступ в 70px к нижней части полноэкранного div. Это прекрасно работает для iphone, но затем этот ненужный интервал добавляется ко всем устройствам. Это может нарушить полноэкранный эффект, который я хочу в некоторых, и создать ненужные полосы прокрутки в браузерах dektop.

Есть ли умная работа вокруг? Или мне нужно определить высоту браузера Chrome или получить его от обнаружения устройства, и добавить этот отступ соответственно?

Спасибо

1 Ответ

1 голос
/ 29 февраля 2012

Лучший способ - написать специальный css для устройств и их ориентации.

Вы можете видеть медиазапросы для определения ориентации устройств и устанавливать css в соответствии с этим. 

<link rel="stylesheet" type="text/css" href="ipad.css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px)" />
<link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-device-width: 480px)" />

Чтобы скрыть панель, используйте этот скрипт: 

if (navigator.userAgent.indexOf('iPhone') != -1) {
        addEventListener("load", function() {
        setTimeout(hideURLbar, 0);
        }, false);
        }

        function hideURLbar() {
        window.scrollTo(0, 1);
        }
...