Нужна веб-страница iPhone / iPad / iOS с шириной / высотой 100%

Question

Я пытаюсь получить сайт, который составляет 100% от возможной ширины / высоты устройства, после прокрутки вниз достаточно далеко, чтобы избавиться от адресной строки.Надеюсь, это имеет смысл?

Мне просто нужны простые размеры, чтобы я мог прокрутить устройство до 0,0 и увидеть как можно больше своей страницы.например, просто 320x400 (ширина 320, 400 может = высота - строка заголовка - нижний колонтитул)

Причина этого в том, что я помещаю один DIV на страницу, которая является «областью просмотра» в контент, который перемещаетсяподумай гугл карты.Я просто хочу, чтобы этот div заполнил все доступное пространство.

Проблема в том, что я не могу определить доступную высоту окна.Мне всегда кажется, что размер экрана - строка заголовка - адресная строка - дополнительная строка отладки - нижний колонтитул.Как определить «максимально возможный размер»?

Answer 1

Поместите html,body с height:100%; и div как position:absolute;top:0;bottom:0;left:0;right:0;, и тогда вам не нужна точная ширина / высота области просмотра, div уже будет использовать максимально возможное пространство.

Но если вы все еще хотите обнаружить, jQuery также получил $(element_you_want).width() и .height(), которые могут сработать.Попробуйте с документом или только телом (с высотой 100%)

Answer 2

Отвечая на это сам:

var $div = $( '<div></div>' ).appendTo( document.body );

$div.css({height:2000,width:2000});

setTimeout(function(){
    window.scrollTo(0,1);
    alert( window.innerHeight + ', ' + window.innerWidth );
}, 10);

Основная идея состоит в том, что я заставляю окно быть больше, чем я знаю, что оно может поддерживать, удаляю адресную строку, затем измеряю размер.Теперь я могу пойти и изменить размер этого div.

Answer 3

Если вы используете JavaScript, попробуйте предупредить: 'innerWidth';

http://www.quirksmode.org/dom/w3c_cssom.html