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

Question

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

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

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

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

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

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

Благодаря

Answer 1

Самый лучший способ, чтобы написать специальный 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); 
     }