Ошибка поворота CSS Safari в iPhone

Question

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

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

Answer 1

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

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

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

Больше информации от Справочная библиотека Safari

Answer 2

Вы пытались включить метатег viewport, например:

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

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