Збережіть розмір шрифту HTML, коли орієнтація iPhone змінюється від портретної до пейзажної

У мене є веб-додаток для мобільних пристроїв із невпорядкованим списком, що містить декілька списків із гіперпосиланням всередині кожного li:

... Моє запитання полягає в тому, як я можу відформатувати гіперпосилання, щоб вони НЕ змінювали розмір при перегляді на iPhone, а акселерометр перемикався з портретного -> ландшафтного? Зараз у мене розмір шрифту гіперпосилання специфікується до 14 пікселів, але при переході на ландшафт він збільшує приблизно 20 пікселів. Я хочу, щоб розмір шрифту залишався однаковим. Ось код:

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-prilagod-size: none; безпосередньо на 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 Phone.

Поточну інформацію про реалізацію в різних браузерах див. На довідковій сторінці MDN .

Наведений нижче код працює для мене.

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

Спробуйте очистити кеш браузера, якщо він не працює.

Станом на березень 2019 року, коригування розміру тексту має розумну підтримку серед мобільних браузерів .

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%;
}