iPhone Safari CSS rotation bug

Question

У меня есть небольшое приложение для мобильных телефонов, которое действует странно на iPhone/Mobile Safari. Страница отображается и отлично работает, когда ориентация вертикальна. Когда я поворачиваю телефон по горизонтали, некоторые, но не все элементы на странице изменяют размер правильно. Некоторые элементы заголовка будут оставаться почти одного размера, возможно, увеличится на 10%, другие удвоятся.

Кто-нибудь сталкивался с этим? Моя первая мысль заключалась в том, что css может иметь сочетание размеров на основе ems и px, но поиск каждого элемента размера и преобразование их в em не меняет ничего.

Answer 1

Это потому, что Mobile Safari на iPhone & iPod Touch автоматически регулирует размер шрифта.

Вы можете отключить его с помощью следующего правила CSS,

html {-webkit-text-size-adjust:none}

Подробнее от Safari Reference Library

Answer 2

Вы пробовали в том числе окна просмотра мета-тег, например, как это:

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

В противном случае, вы могли бы попробовать создать ориентации конкретных CSS стилей и поменять их ж/JavaScript, когда срабатывает событие изменения ориентации, но Я предпочитаю метод метатега выше.