Сохранить размер шрифта HTML при изменении ориентации iPhone с книжной на альбомную

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

... Мой вопрос заключается в том, как я могу отформатировать гиперссылки, чтобы они не меняли размер при просмотре на iPhone, и акселерометр переключался из портретной ориентации в альбомную? Прямо сейчас у меня есть размер шрифта гиперссылки, указанный в 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>

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

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

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

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

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

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

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

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

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

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

Как упоминалось ранее, правило 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">

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

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

Вы также можете выбрать сброс CSS, например 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 .

Приведенный ниже код работает для меня.

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

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

По состоянию на март 2019 года text-size-Adjust имеет разумную поддержку среди мобильных браузеров .

body {
  text-size-adjust: none;
}

Использование viewportметатега не влияет на настройку размера текста, а настройки user-scalable: no даже не работают в IOS Safari .

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

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

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