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

Question

У меня есть мобильное веб-приложение с неупорядоченным списком, содержащим несколько элементов списка с гиперссылкой внутри каждого 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>

Answer 1

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

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

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

Answer 2

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

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

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

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

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

Answer 3

Использование -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;
     }
}

Answer 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">

Answer 5

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

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

Answer 6

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

Answer 7

Код ниже работает для меня.

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

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

Answer 8

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

body {
  text-size-adjust: none;
}

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

Answer 9

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

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

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