Подтвердить что ты не робот

Шрифты становятся жирными при изменении ориентации

Я использую это в html:

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

и это в CSS:

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

также пробовал это:

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

и все же по какой-то причине это происходит:

enter image description hereenter image description here

Обновление. Я попытался удалить все стили, чтобы увидеть, вызывает ли какой-либо из моих CSS этот результат, и результат был странным: когда я не использую никаких правил шрифта, шрифт просто становится больше ( он не масштабируется, поскольку масштабирование блокируется атрибутом HTML viewport), кроме того, только малый шрифт становится больше, заголовки остаются неизменными. weird @# $%

Обновление 2: я играл с html/css и пришел к такому выводу - единственный раз, когда расширение текста НЕ происходит, когда текст содержится внутри единственного элемента на странице - например, если все мое тело содержит p/span/div с текстом, оно не будет увеличено. Если я добавлю в него еще один элемент с текстом, весь текст на странице будет увеличен в альбомном режиме.
Я пробовал делать некоторые исследования и просматривал многие мобильные сайты, и результат один и тот же - все они имеют этот эффект.

4b9b3361

Ответ 1

Дополнительная информация, чем реальное решение

Основываясь на моем понимании того, как все работает в соответствии с эта страница и этой странице, весь текст будет восстановлен в ландшафтном режиме на основе -webkit-text-size-adjust: auto (по умолчанию для iOS) или вашей настройки -webkit-text-size-adjust: 100%.

Я не верю, что параметр 100% делает то, что вы думаете, что он делает (попытка сохранить размер текста одинаковым). Скорее, это влияет только на то, как применяется алгоритм раздувания текста (за эта страница). Я не смог точно определить, что это может означать; то есть что означает 100% по алгоритму инфляции. Я предполагаю, что на основе цитаты этой страницы...

При первом просмотре веб-страницы Safari на iOS получает ширину блока и определяет подходящую шкалу текста, чтобы текст разборчивыми.

... что, поскольку процедура выполняется только "при первом просмотре веб-страницы", что после того, как устройство будет повернуто от портрета к пейзажу, алгоритм инфляции будет "расти", поскольку текст основан на изменении ширины экрана, даже если установлено значение 100%.

Возможно, это связано с тем, что 100% относится к разнице ширины портрета к пейзажу. Например, эта спецификация iPhone составляет 960 x 640. Возможно, что 100% означает, что инфляция использует некоторую прямую связь 960 x 640 (скажем, 960/640 x 100%), составляя 1,5, что затем вызывает "смелость" ландшафтного текста. Если это так, то теоретически -webkit-text-size-adjust, возможно, необходимо установить в 66.67%, чтобы он не был затронут (возврат коэффициента 1.5 к 1). Но я не уверен, что это так прямо.

В конечном счете, я думаю, что ответ Андрея Букати от -webkit-text-size-adjust: none; является единственной гарантией того, что изменение размера текста не произойдет. Но это может иметь другие, возможно, нежелательные последствия.

Ответ 2

попробуйте заменить css на

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

Ответ 3

Попробуйте добавить следующее...

-webkit-transform: translate3d (0,0,0);

Ответ 4

hm, попробуйте

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

вместо

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

Найденный в этот поток, и он работал как для парня в потоке, так и для меня.