text-size-adjust¶
На мобильных устройствах свойство text-size-adjust позволяет верстальщикам контролировать, как применять алгоритм наполнения текста к текстовому содержимому элемента, к которому он и применяется.
Так как это свойство нестандартное, нужно использовать префиксы: -moz-text-size-adjust , -webkit-text-size-adjust , и -ms-text-size-adjust .
Браузеры на смартфонах не отображают странички используя одни и те же алгоритмы, что и настольные компьютеры. Вместо того чтобы отобразить страничку по ширине экрана устройства, они используют viewport , который значительно шире экрана устройства, обычно 800 или 1000 пикселей в ширину. Один из двух возможных методов это отобразить к оригинальным координатам устройства и отображать используя меньшее окно для отображения на экране только части того что на самом деле визуализировано, или же viewport сжимается к размерам устройства.
В сущности, это также означает, что только маленькая, прямоугольная часть оригинальной веб страницы обычно видна на экране мобильного устройства или что на мобильном устройстве страничка выглядит «в уменьшенном масштабе» и меньше чем предполагалось.
- letter-spacing
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-style
- text-decoration-thickness
- text-decoration-skip
- text-decoration-skip-ink
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-indent
- text-rendering
- text-shadow
- text-underline-position
- text-transform
- white-space
- word-spacing
Синтаксис¶
1 2 3 4 5 6 7 8 9 10 11 12 13
/* Text is never inflated */ text-size-adjust: none; /* Text may be inflated */ text-size-adjust: auto; /* Text may be inflated in this exact proportion */ text-size-adjust: 80%; /* Глобальные значения */ text-size-adjust: inherit; text-size-adjust: initial; text-size-adjust: unset; Спецификация¶
Ссылки¶
text — size — adjust
Может ли браузер на мобильных самовольно увеличить шрифт страницы?
Время чтения: меньше 5 мин
Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство text — size — adjust позволяет отменять или задавать увеличение шрифта на мобильных экранах. Такое увеличение используют мобильные браузеры для улучшения читаемости текста страниц, не адаптированных для мобильных экранов. Если страница адаптирована, это увеличение отключают.
Свойство пока поддерживается не всеми браузерами. Проверяйте поддержку на Can I use.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
body /* С префиксом для Safari */ -webkit-text-size-adjust: none; text-size-adjust: none;>body /* С префиксом для Safari */ -webkit-text-size-adjust: none; text-size-adjust: none; >
- none отключает увеличение;
- auto включает увеличение на усмотрение браузера;
- 50 % значение в процентах задаёт нужное увеличение.
text-size-adjust
Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Свойство text-size-adjust контролирует алгоритм увеличения текста, используемый на некоторых смартфонах и планшетах. Другие браузеры будут игнорировать это свойство.
Так как это свойство нестандартное, нужно использовать префиксы: -moz-text-size-adjust , -webkit-text-size-adjust , и -ms-text-size-adjust .
Поскольку при разработке многих сайтов не подразумевался их просмотр на мобильных устройствах, то мобильные браузеры отличаются от браузеров для настольных компьютеров способом вывода страницы на экран. Для размещения страниц они используют не ширину экрана устройства, а viewport, который значительно шире, обычно 800 или 1000 пикселей. Чтобы вернуть соответствие слишком широкой страницы истинному размеру устройства, они или показывают лишь часть того, что на самом деле визуализировано, или же уменьшают размер viewport до размеров устройства.
Так как текст, который был уменьшен для того, чтобы уместиться на мобильном экране, может стать очень маленьким, многие мобильные браузеры применяют алгоритм увеличения текста для того, чтобы масштабировать текст и сделать его более удобным для чтения. Когда элемент, содержащий текст, использует 100% ширины экрана, алгоритм увеличивает размер его текста, но без изменения макета. Свойство text-size-adjust позволяет веб-разработчикам отменить или изменить это поведение, так как веб-страницы, созданные с учётом вывода на маленькие экраны, не нуждаются в нём.
This approach has been used as numerous web sites are not able to cope with small screens and are not usable when using the classical layout algorithm. This technique has drawbacks: the text is so tiny that it is unreadable without zooming. Even so, the user experience is better with the classical approach, which often leads to put secondary content at the top of the smartphone display, effectively pushing the main content of the page outside the viewport.
But when the user zoomed in until the text becomes readable, an horizontal scrollbar is often needed as the line becomes larger than the width of the screen. This horizontal scrollbar has to be used to read each line of the text, which is a user experience nightmare. To prevent this, several mobile browsers implement a text inflation algorithm. When a focused element containing text use 100 % of the width of the screen, its text size is increased until it reached a readable size, without modifying the layout and removing the need of an horizontal scrollbar.
The text-size-adjust property allows Web authors to opt out from this behavior, as Web pages designed to handle small screen widths do not need it.
- Its behavior, and even the syntax, is slightly different from one browser engine to the other. Web developers should read the browser compatibility section with the required attention.
- Это свойство работает только на смартфонах. As there is no inflation algorithm on desktop browsers, and on some tablet browsers like the iPad, the property is not supported there (and ignored). This property is only designed to opt out, or to cancel this opt-out, of the inflating behavior, not to opt in.
- If -webkit-text-size-adjust is explicitly set to none , old versions of Webkit-based desktop and tablet browsers, like Chrome≤26 or Safari≤5, instead of ignoring the property, will prevent the user to zoom in or out the Web page.#
- Not all engines do allow to control the final size of the text using a percentage value (E.g. Webkit and Trident do allow it, Gecko doesn’t). Again Web developers should read the browser compatibility section with the required attention.
| Начальное значение | auto для браузеров в смартфонах поддерживается увеличение, none в других случаях (и позже не изменяется). |
|---|---|
| Применяется к | все элементы |
| Наследуется | да |
| Проценты | да, относятся к соответствующему размеру шрифта текста |
| Обработка значения | как указано |
| Animation type | by computed value type |
Синтаксис
/* Text is never inflated */ text-size-adjust: none; /* Text may be inflated */ text-size-adjust: auto; /* Text may be inflated in this exact proportion */ text-size-adjust: 80%; /* Глобальные значения */ text-size-adjust: inherit; text-size-adjust: initial; text-size-adjust: unset;
Значения
Is a keyword preventing the usage of the inflation algorithm on the element. Basically, this means that the element will be displayed without its font inflated. On old WebKit-based desktop browsers (Chrome≤26, Safari≤5), this will instead prevent the user from zooming the webpage in or out.
Is a keyword allowing the usage of the inflation algorithm on the element. Browsers are not forced to use it and they won’t do it on desktops and on some tablets. Its main use is to cancel a none value previously set.
A percentage value is a synonym of the auto keyword, with the additional information that the percentage value is the increase rate to be applied to the font size when the inflation algorithm is applied.
Формальный синтаксис
Спецификации
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
Found a content problem with this page?
This page was last modified on 7 нояб. 2022 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
CSS и iOS Safari
Доброго времени суток, дорогие хабрахабровцы!
Всегда хочется, что бы твой сайт выглядел одинаково хорошо на разных устройствах, включая и мобильные. Но, если поведение в браузерах Android во многом предсказуемо, то с iOS возникает ряд «сюрпризов». О них сегодня и поговорим!
Часть примеров уже публиковалась на Хабре, но я все-равно решил включить их в статью. Разделю статью на две части. В первой – приведу список полезных css-свойств для webkit, а во второй поговорим о фиксах проблем, возникающих при версте для iOS Safari.
Свойства
1. -webkit-overflow-scrolling: touch
Это css-свойство добавит плавный скролл в блоках с overflow: scroll. Рекомендую добавлять это свойство везде, где внутри блока может возникать прокрутка, к примеру, в мобильном меню.
2. -webkit-text-size-adjust: none
Отключает масштабирование текста в горизонтальной ориентации.
3. -webkit-tap-highlight-color: #ccc
Устанавливает цвет выделения активного элемента при тапе на нем (a, label). По умолчанию это серый цвет, и часто может быть ни к чему, или выбиваться из общего дизайна.
4. -webkit-appearance: none
Отключает наложение на элементы стилей системы: тени, border-radius и т.д. Применяется для input (но не всех), textarea, и т.д. Удобно, когда надо задать единый вид элементов на всех устройствах.
input[type=text], input[type=submit], textarea
Применяется не только в верстке для Safari.
Данный медиа-запрос позволит отдельно прописывать стили только для устройств, с поддержкой тач. Таким образом, на тач-устройствах можно отключить лишние анимации, ненужные данным типам устройств.
Можно использовать не только в верстке для Safari.
Фиксы
1. background-attachment: fixed
Проблема: background-attachment: fixed не работает в iOS Safari.
Решение: Фиксировать не фон, а блок или псевдоэлемент.
2. Нежелательный скролл модального окна
Проблема: Это довольно редкий случай, но для общей информации, думаю, так же полезно будет знать о нем. Если модальное окно имеет собственную прокрутку и в закрытом состоянии просто установлен отрицательный z-index (и, к примеру, opacity: 0) — то при попытке скролла страницы, модальное окно может перехватить скролл. В результате чего не будет осуществляться прокрутка страницы.
Решение: Добавляем pointer-events: none к модальному окну в закрытом состоянии.
3. Пропадание меню при скролле
Для того, что бы меню «прилипало» к верхней границе экрана при скролле страницы, часто используют следующий прием. Изначально у меню установлено свойство position: absolute, и при достижении верхней границы окна, через js оно меняется на fixed. А при скролле страницы к началу, значение опять меняется на absolute.
Проблема: В Safari на iOS, при смене position с fixed на absolute, меню пропадает с экрана пока скролл не завершится.
Решение: Использовать для меню position: -webkit-sticky. Поведение меню будет сравнимо с вышеописанным, но пропадать ничего не будет! Плюс, не надо использовать js
.nav < . position: absolute; >.nav_fix < position: fixed; >@supports ((position:sticky) or (position:-webkit-sticky)) < .nav, .nav_fix< position: -webkit-sticky; position: sticky; >>К слову, значение sticky для свойства position сейчас поддерживается большим количеством браузеров, поэтому его можно использовать и в десктопных браузерах.
4. Блок с position: fixed при скролле
Если реализации решений предыдущих проблем я видел на некоторых сайтах, то данная проблема на сайтах встречается постоянно.
Проблема: При скролле в браузере изменяется высота экрана. Отсюда, если при раскрытом меню или модальном окне не блокировать скролл, возникает подобный эффект:
Решение: Нужно сделать следующий «трюк», используя transform.
Величина в 70px покрывает разницу в изменении высоты окна. И только transform позволяет прорисовывать фон элемента за пределами экрана в данной ситуации.
Выводы
А выводов особо нет, просто пользуйтесь ) Если знаете еще полезные css-свойства или «фиксы», применимые на практике, пишите в комментариях!
Update
В свойствах изменен пункт 5. Т.к. media (hover) имеет узкую поддержку. Спасибо dom1n1k за ценное замечание.