Короткая версия: в моем мобильном веб-приложении я хочу всегда обнаруживать видимую область экрана (например, пространство между верхней частью экранной клавиатуры (если имеется) и нижней частью заголовка), так что я могу корректировать свой макет без масштабирования и всегда держать страницу полностью видимой на экране.Есть ли надежный способ сделать это?
Более длинная версия: в приложении я собираю все сенсорные события и контролирую панорамирование и масштабирование самостоятельно.Панели управления зафиксированы сверху и снизу экрана, всегда видны.Мои настройки veiwport:
<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=no">
Я хочу всегда адаптировать макет моей страницы к видимой области окна браузера, чтобы ничего не было за кадром.Поэтому, когда клавиатура появляется или исчезает, или когда меняется ориентация, мне нужно определить ширину и высоту и соответственно изменить ее расположение.
Если не для экранной клавиатуры, window.innerWidth и window.innerHeight будет достаточно.Однако, когда появляется клавиатура, все становится странно (работает только в определенных жестко контролируемых условиях).И, боже упаси, есть изменение ориентации, когда клавиатура поднята.
Есть ли в DOM что-нибудь, что может сказать мне, чего я хочу?Я действительно предпочел бы выяснить это динамически, а не фиксировать размер элементов интерфейса в моем коде, но я прибегну к этому, если другого пути нет.все странности, которые я испытывал.Мое тестирование проводилось преимущественно на iPad с 3.2 и iPhone под 4.1;поведение было непоследовательным в обоих случаях.