Сохранять размер шрифта HTML при изменении ориентации iPhone с портрета на пейзаж

У меня есть мобильное веб-приложение с неупорядоченным списком, содержащим несколько списков с гиперссылкой внутри каждого li:

... Мой вопрос в том, как я могу отформатировать гиперссылки, чтобы они не меняли размер при просмотре на iPhone, а accellerometer переключается с портрета → на пейзаж? Прямо сейчас у меня размер шрифта гиперссылки spec'ed до 14px, но при переключении на пейзаж он пробивается до 20px. Я хочу, чтобы размер шрифта остался прежним. Вот код:

ul li a
{
  font-size:14px;
  text-decoration: none;
  color: #cc9999;
}

<ul>
  <li id="home" class="active">
    <a href="home.html">HOME</a>
  </li>
  <li id="home" class="active">
    <a href="test.html">TEST</a>
  </li>
</ul>

Ответ 1

Вы можете отключить это поведение с помощью свойства -webkit-text-size-adjust CSS:

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

Использование этого свойства описано далее в Руководстве по веб-контенту Safari.

Ответ 2

Примечание: если вы используете

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

то это отключит поведение масштабирования в браузерах по умолчанию. Лучшее решение:

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

Это исправляет поведение iPhone/iPad, не изменяя поведение рабочего стола.

Ответ 3

Использование -webkit-text-size-adjust: none; прямо на html ломает возможность масштабирования текста во всех браузерах webkit. Вы должны объединить это с запросами сома, специфичными для iOS. Например:

@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
     html {
        -webkit-text-size-adjust: none;
     }
}

Ответ 4

Как уже упоминалось ранее, правило CSS

 -webkit-text-size-adjust: none

больше не работает на современных устройствах.

К счастью, для iOS5 и iOS6 появилось новое решение (todo: что относительно iOS7?):

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

Вы также можете добавить , user-scalable=0, чтобы отключить масштабирование, поэтому ваш сайт будет вести себя как родное приложение. Если ваша конструкция тормозит при масштабировании пользователя, используйте вместо этого метатег:

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

Ответ 5

Вы можете добавить мета в HTML-заголовок:

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

Ответ 6

Вы также можете выбрать использование CSS reset, например normalize.css, который включает то же правило, что и crazygringo рекомендует:

/**
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

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

Как вы видите, в нем также содержится специальное правило поставщика для IE-телефона.

Для получения текущей информации о реализации в разных браузерах см. справочную страницу MDN.

Ответ 7

Следующий код работает для меня.

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

Попробуйте очистить кеш браузера, если он не работает.

Ответ 8

В моем случае эта проблема возникла из-за того, что я использовал атрибут CSS width: 100% для HTML-тега input type="text".

Я изменил значение width на 60% и добавил padding-right:38%.

input {
    padding-right: 38%;
    width: 60%;
}