Веб-приложение IOS увеличивает при повороте, когда отображается клавиатура

<!doctype html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=600,user-scalable=no">
</head>
<body>
<div style="width:570px;height:300px;border:1px solid black" >
<input type=text>
</div>
</body>
</html>

При открытии вышеуказанного файла с главного экрана и касании в поле ввода в альбомном режиме, затем при повороте телефона в портретный режим экран увеличивается, и уменьшить его невозможно. Не происходит при открытии в Safari.

Действия по воспроизведению:
1. Сохраните закладку в файл на главном экране.
2. Откройте закладку на главном экране
3. Переведите телефон в ландшафтный режим.
4. Нажмите в поле ввода, появится клавиатура
5. Переведите телефон в портретный режим.

Ожидаемые результаты: экран не должен увеличиваться.

Фактические результаты: Экран увеличится.

Версия: IOS 9

Примечания: не произошло до IOS9. Не происходит в Safari, только в Web Clip.

Есть идеи для обхода?

Источник

1 ответ

Решение

Нашел решение здесь:

https://github.com/scottjehl/iOS-Orientationchange-Fix

Хотя для меня нет необходимости в акселерометре, просто установка мета-контента в "Maximum-Scale=1" делает свое дело:

 var meta = document.querySelector( "meta[name=viewport]" ),
            initialContent = meta && meta.getAttribute( "content" ),
            disabledZoom = initialContent + ",maximum-scale=1";

        function restoreZoom(){
            meta.setAttribute( "content", disabledZoom );
            
        }
window.addEventListener( "orientationchange", restoreZoom, false );

Источник
Другие вопросы по тегам