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

172

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

8 ответов

340
Лучший ответ

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

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

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

Поделиться
  • 4
    Как отмечает snobojohan, вы можете обернуть это в медиа-запрос для конкретного ландшафта, чтобы сохранить возможность увеличения размера шрифта в настольных браузерах. Это не обязательно на страницах с таргетингом на iOS, где масштабирование будет работать независимо.
  • 0
    Эта функция не работает в iOS6. Вы также можете попробовать использовать <meta content="viewport" (см. Ниже)
Показать ещё 12 комментариев
92

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

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

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

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

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

Поделиться
  • 3
    Я бы проголосовал за это еще несколько раз, если бы мог. Отлично!
  • 3
    это должно быть принятое решение!
24

Использование -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;
     }
}
Поделиться
  • 0
    Как ни странно, я только заставил его работать, поместив свойство -webkit в медиа-запрос. Спасибо!
12

Как уже упоминалось ранее, правило 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">
Поделиться
  • 0
    Хорошо, хороший вопрос - использовать ли разделитель запятой или точки с запятой в этом метатеге! Но это работает :)
  • 0
    Это сработало для меня. Благодарю.
Показать ещё 2 комментария
10

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

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

Поделиться
7

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

Поделиться
2

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

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

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

Поделиться
0

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

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

input {
    padding-right: 38%;
    width: 60%;
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню