Путаница в области просмотра iPhone / window.innerHeight

У меня проблемы с подгонкой сайта под размеры экрана iphone.

Я делаю следующее: у меня есть слайд-шоу с несколькими изображениями в полноэкранном режиме в задней части страницы и небольшим текстом сверху.

Когда я настраиваю слайд-шоу, я делаю следующее:

$('#bg').css('width', window.innerHeight).css('height', window.innerWidth);

Затем я вставляю слайд-шоу, масштабирую и обрезаю изображения соответствующим образом. Это отлично работает во всех браузерах для настольных компьютеров. Тем не менее, iPhone не возвращает фактический размер экрана, а значение 5000, поэтому я получаю довольно большое слайд-шоу. Остальная часть макета выглядит отлично в соответствии с данным CSS.

Я знаю о «штуке» окна просмотра в iPhone и уже читал это: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/UsingtheViewport/UsingtheViewport.html, в результате чего я вставил следующий метатег :

<meta name="viewport" content = "user-scalable=no, initial-scale=1" />

Опять же, это не имеет никакого значения, iPhone все равно вернет размер 5000 пикселей.

Кто-нибудь может сказать мне, что я делаю не так? Большое спасибо!


person m90    schedule 24.06.2011    source источник


Ответы (2)


Хорошо, так что для меня помогло использование этой комбинации мета-тегов:

<meta name="viewport" content="user-scalable=no, width=device-width" />
person m90    schedule 28.06.2011

Попробуйте в метатеге width = device-width - и убедитесь, что у вас нет других элементов шириной 5000 пикселей.

person danmux    schedule 27.06.2011
comment
Спасибо, я попробовал это, и это привело меня к тому, что устройство вернуло правильное значение ширины в портретном режиме, но каким-то образом значения все еще перепутаны в ландшафтном режиме? - person m90; 28.06.2011