Mobile Safari не изменяет ориентацию?

Question

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

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 

Это, кажется, имеет желаемый эффект на все браузеры, кроме Mobile Safari. На Safari у меня две проблемы:

1. Нижняя часть страницы висит около 60 пикселей ниже нижней части окна в портретном режиме и около 120 пикселей в ландшафтном режиме. Я предполагаю, что это связано с тем, что адресная строка Safari подсчитывается как часть видимой области, но можете ли вы проверить это и как я могу обойти это без влияния на другие браузеры?
2. Содержимое страницы не изменяется при правильной настройке после изменения ориентации. На правой стороне страницы я получил большой желоб.

Если это делает никакой разницы, я использую JQuery Mobile и это page объект с panel на левой стороне. Ни одна из этих ошибок не присутствует в Chrome для Android или Browser.apk.

Редактировать страницу можно на странице http://bit.ly/19LoH8m.

Спасибо. Scott

Answer 1

Решил проблему путем удаления width и height свойств от иллюминатора. Теперь он корректно отображает Mobile Safari, Chrome (для iOS, desktop и Android) и IE10.

Answer 2

Попробуйте обновить их первым и посмотрим.

Вместо

$("#mapViewer").outerHeight($(window).innerHeight()); 

Использование

$("#mapViewer").outerHeight($(window).height()); 

См JQ документ, http://api.jquery.com/innerHeight/

И есть также событие изменения ориентации в JQM, Вместо

$(window).resize(function() { 
    /* some calculation */ 
}); 

Использование

$(window).on("orientationchange", function(event) { 
    /* some calculation */ 
});