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

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

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


person Michael    schedule 04.06.2010    source источник


Ответы (2)


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

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

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

Дополнительные сведения см. на странице Справочная библиотека Safari

person Livingston Samuel    schedule 23.08.2010

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

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

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

person Brian Driscoll    schedule 06.07.2010
comment
У меня был метатег области просмотра. Это была довольно странная ошибка, и я так и не нашел решения (это было частью стажировки, и я пошел и получил работу, поэтому я больше не участвую в проекте). - person Michael; 07.07.2010
comment
Воу только что столкнулся с такой же проблемой. добавил значения масштаба в метатег, исправил его при обновлении. (До этого у меня был только масштабируемый пользователем.) Хотя странно. - person Ian Storm Taylor; 11.08.2010