Как отключить масштабирование содержимого MobileSafari при изменении ориентации? - PullRequest
Новая
       14

Как отключить масштабирование содержимого MobileSafari при изменении ориентации?

5 голосов
/ 18 августа 2011

Я делаю мобильную версию своего сайта поддержки приложений, и у меня небольшая проблема с WebKit / iOS / HTML / CSS здесь ...

У меня есть страница, index.php, с mobile.css Прикрепленный файл.В моем теге <head> есть: 

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

css моего body: 

body {
    font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue","Helvetica","Lucida Grande",Verdana,Arial,sans-serif;
    margin: 0;
    background: url(../../images/textured_bg.png) repeat;
    color:#454545;
    font-size: 14px;
    text-shadow: rgba(255, 255, 255, 0.5) 0 1px;
    width:100%;
}

Все отлично работает в портретной ориентации, но когда я поворачиваю свой iPhone в альбомную, Safari масштабирует мой контент так, чтобы он выглядел как в портретной, но немного больше:

enter image description here

Мой вопрос: есть ли способ, без создания пользовательских CSS для каждой ориентации, чтобы заставить Safari не масштабировать мой контент?

Ответы [ 3 ]

10 голосов
/ 01 сентября 2011

Ключевой частью для исправления этого является не метатег видового экрана (хотя это тоже важно, но по разным причинам).Вот магия, которая исправляет размер текста при изменении ориентации. 

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

(Я получил это из мобильного CSS-файла StackExchange.)

8 голосов
/ 19 августа 2011

Возможно, вы захотите использовать тег <meta name="viewport" .../> (см. Документы MDN и Руководство по веб-контенту Safari ). Макет мобильного стека Exchange использует это: 

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" />
0 голосов
/ 28 марта 2012

Я пробовал запятые, не работал - потом пробовал точки с запятой, это сработало.iPod touch, iOS 4.2

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...