Как узнать высоту мобильного сафари хрома?

Question

Я пытаюсь загрузить div и расположить его абсолютно в мобильном сафари - подумайте что-то вроде окна предупреждения.

Я попытался использовать абсолютно позиционированный div с top установленным на 50% с полем высоты / ширины:

#overlay-message {
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 20px;
  margin: -67px 0 0 -110px;
  width: 220px;
  height: 125px;
} 

но, как я понял, область просмотра будет отличаться от фиксированной позиции на странице, и элемент будет отображаться в смещенной позиции при прокрутке браузера вниз. Я подумал, что мог бы попытаться переместить позицию, используя javascript на основе значения window.pageYOffset, но, к сожалению, это показывает 0 независимо от того, отображается хром или нет.

Моей последней мыслью было вычислить высоту хрома браузера с помощью window.outerHeight-window.innerHeight, а затем переместить div на основе этого значения, но, к сожалению, это не работает.

Я пытался (с JQuery):

$(window).load(function() {
    chrome_height = window.outerHeight - window.innerHeight;
    alert('chrome height is ' + chrome_height + ' outerheight: ' + window.outerHeight + ', innerheight: ' + window.innerHeight); 
});

Но я обнаружил, что window.innerHeight и window.outerHeight одинаковы - 306 (у меня включен браузер Safari Developer Chrome) - так что это, похоже, не работает.

Кто-нибудь может указать мне правильное направление на это?

спасибо!

-simon

Answer 1

В этой статье описывается проблема вьюпорта , особенно грандиозная трагическая точка, когда вы получаете не-Retina размеры для window.innerWidth/Height и Retina с использованием window.ourerWidht/Height

Answer 2

Разве вы не можете просто сделать скриншот Safari на своем iPhone, а затем перенести фотографию в Photoshop или аналогичную программу и измерить ее? Помните, что фотографии, снятые с помощью нажатия клавиши «кнопка включения-кнопка домой», в два раза больше фактического размера на экране, поэтому разделите ваш рост на 2.