path: root/files/ru/web/css/text-size-adjust/index.html

---
title: text-size-adjust
slug: Web/CSS/text-size-adjust
tags:
  - Эксперементально
translation_of: Web/CSS/text-size-adjust
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>

<p>Свойство <strong><code>text-size-adjust</code></strong> контролирует алгоритм увеличения текста, используемый на некоторых смартфонах и планшетах. Другие браузеры будут игнорировать это свойство.</p>

<p>Так как это свойство нестандартное, нужно использовать префиксы: <code>-moz-text-size-adjust</code>, <code>-webkit-text-size-adjust</code>, и <code>-ms-text-size-adjust</code>.</p>

<p>Поскольку при разработке многих сайтов не подразумевался их просмотр на мобильных устройствах, то мобильные браузеры отличаются от браузеров для настольных компьютеров способом вывода страницы на экран. Для размещения страниц они используют не ширину экрана устройства, а {{glossary("viewport")}}, который значительно шире, обычно 800 или 1000 пикселей. Чтобы вернуть соответствие слишком широкой страницы истинному размеру устройства, они или показывают лишь часть того, что на самом деле визуализировано, или же уменьшают размер viewport до размеров устройства.</p>

<p>Так как текст, который был уменьшен для того, чтобы уместиться на мобильном экране, может стать очень маленьким, многие мобильные браузеры применяют алгоритм увеличения текста для того, чтобы масштабировать текст и сделать его более удобным для чтения. Когда элемент, содержащий текст, использует 100% ширины экрана, алгоритм увеличивает размер его текста, но без изменения макета. Свойство <code>text-size-adjust</code>  позволяет веб-разработчикам отменить или изменить это поведение, так как веб-страницы, созданные с учётом вывода на маленькие экраны, не нуждаются в нём.</p>

<p>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.</p>

<p>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 <strong>inflation</strong> 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.</p>

<p>The <code>text-size-adjust</code> property allows Web authors to opt out from this behavior, as Web pages designed to handle small screen widths do not need it.</p>

<div class="note"><strong>Предупреждения</strong><strong>:</strong>

<ul>
 <li>Это свойство является нестандартным. In order to use it, Web authors have to duplicate, or even triplicate it, prefixed for each engine supporting it.</li>
 <li>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.</li>
 <li><strong>Это свойство работает только на смартфонах. </strong>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, <em>not to opt in</em>.</li>
 <li>If <code>-webkit-text-size-adjust</code> is explicitly set to <code>none</code>, 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.<a href="https://bugs.webkit.org/show_bug.cgi?id=56543">#</a></li>
 <li>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.</li>
</ul>
</div>

<p>{{cssinfo}}</p>

<h2 id="Синтаксис">Синтаксис</h2>

<pre class="brush: css notranslate">/* 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;
</pre>

<h3 id="Значения">Значения</h3>

<dl>
 <dt><code>none</code></dt>
 <dd>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.</dd>
 <dt><code>auto</code></dt>
 <dd>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 <code>none</code> value previously set.</dd>
 <dt><code>&lt;percentage&gt;</code></dt>
 <dd>A percentage value is a synonym of the <code>auto</code> 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.</dd>
</dl>

<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>

<pre class="syntaxbox notranslate">{{csssyntax}}</pre>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS Text Size Adjust", "#adjustment-control", "text-size-adjust")}}</td>
   <td>{{Spec2("CSS Text Size Adjust")}}</td>
   <td>Первоначальное определение</td>
  </tr>
 </tbody>
</table>

<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Особенности</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Базовая поддержка</td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
  </tr>
  <tr>
   <td>Проценты</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Особенности</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Базовая поддержка</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("11.0")}} {{property_prefix("-moz")}}</td>
   <td>{{CompatVersionUnknown}} {{property_prefix("-ms")}}<sup>[2]</sup><br>
    11{{property_prefix("-webkit")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
  </tr>
  <tr>
   <td>Процент</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] There is a bug in old Webkit-based desktop browsers. If <code>-webkit-text-size-adjust</code> is explicitly set to <code>none</code>, Webkit-based desktop browsers, like Chrome or Safari, instead of ignoring the property, will prevent the user to zoom in or out the Web page. See <a href="https://bugs.webkit.org/show_bug.cgi?id=56543">Bug 56543</a> (affected Safari≤5 &amp; Chrome≤26), <a href="https://code.google.com/p/chromium/issues/detail?id=163359">Bug 163359</a>, and <a href="https://bugs.webkit.org/show_bug.cgi?id=84186">Bug 84186</a>.</p>

<p>[2] If the viewport is set using {{HTMLElement("meta")}} element, the value of the CSS <code>text-size-adjust</code> property is ignored. See <a href="https://msdn.microsoft.com/en-us/library/ie/dn793579(v=vs.85).aspx">detailed implementation hints on MSDN</a>.</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li><a class="link-https" href="https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html">Документация</a> от Apple.</li>
 <li><a class="external" href="http://dbaron.org/log/20111126-font-inflation">Описание поведения</a> Gecko от L. David Baron.</li>
 <li><a class="external" href="http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff462082(v=vs.105).aspx">Документация</a> от Microsoft.</li>
</ul>