Apple, iPad проблемы с размерами окна

Question

Я пытаюсь совмещать пару изображений «тогда» и «сейчас» в формате JPEG на iPad под управлением Safari. В моем объявлении BODY я ловлю onload и onresize и вызываю JavaScript, который смотрит на window.innerWidth и window.innerHeight. Проблема в том, что Safari сообщает точную информацию для альбомной ориентации iPad, но не для портретной. Для ландшафта Safari сообщает внутренний 981x644 и внешний 1024x673. Но для портрета Safari сообщает внутренний 980x1185 и внешний 768x929. Мой JavaScript смотрит на то, является ли ориентация альбомной или портретной, а затем изменяет размер пары JPEG для бок о бок или сверху и снизу соответственно. Но это не работает, когда Safari лжет о размерах. Кто-нибудь может объяснить, что здесь происходит? Спасибо.

Answer 1

Я не могу объяснить, почему это происходит (это также сводит меня с ума)

Но я могу предложить решение вашей проблемы: сделать это с помощью CSS вместо JS!

Вы можетесделать это с помощью медиазапросов для создания другого макета для портрета и ландшафта:

@media all and (orientation: portrait) {
    ...
}
@media all and (orientation: landscape) {
    ...
}

и с помощью CSS3 для автоматического изменения размера изображений с сохранением их соотношения сторон:

background-position: center;
background-repeat: no-repeat;
background-size: contain;

ВотJSFiddle со всем необходимым кодом: http://jsfiddle.net/BULxm/

Hele - это прямая ссылка на результаты для тестирования на iPad: http://fiddle.jshell.net/BULxm/show/