diff options
Diffstat (limited to 'files/ru/mozilla/mobile')
| -rw-r--r-- | files/ru/mozilla/mobile/index.html | 30 | ||||
| -rw-r--r-- | files/ru/mozilla/mobile/viewport_meta_tag/index.html | 86 |
2 files changed, 0 insertions, 116 deletions
diff --git a/files/ru/mozilla/mobile/index.html b/files/ru/mozilla/mobile/index.html deleted file mode 100644 index 0c27a429bc..0000000000 --- a/files/ru/mozilla/mobile/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Mobile -slug: Mozilla/Mobile -tags: - - Mozilla -translation_of: Mozilla/Mobile ---- -<h2 id="Firefox_OS" name="Firefox_OS"><a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a></h2> - -<p>Firefox OS является мобильной операционной системой с открытым исходным кодом, которая использует Linux и движок Gecko Mozilla, чтобы запускать пользовательский интерфейс и набор приложений, написанных полностью на HTML, CSS и JavaScript.</p> - -<p>Читайте о том, как установить Firefox OS и как разрабатывать приложения для нее.</p> - -<h2 id="Firefox_for_Android" name="Firefox_for_Android"><a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox для Android</a></h2> - -<p>Firefox для Android является мобильным веб-браузером Mozilla для Android-устройств. Он был недавно переписан, чтобы использовать собственный интерфейс Android, что делает его более быстрым, более компактным и более отзывчивым. Он обеспечивает поддержку мощных API-интерфейсов для доступа к возможностям устройств, таких как стеки камеры и телефонии.</p> - -<p>Читайте о том, как помочь создать Firefox для Android, как использовать его API-интерфейсы устройств, и как создавать мобильные дополнения.</p> - -<h2 id="Firefox_for_iOS" name="Firefox_for_iOS"><a href="/en-US/docs/Mozilla/Firefox_for_iOS">Firefox для iOS</a></h2> - -<p>Firefox для iOS является предстоящим мобильным веб-браузером от Mozilla для iOS устройств. Из-за ограничений AppStore, он использует компоненты встроенные в WebView, поставляемые iOS, а не Gecko.</p> - -<p>Читайте о том, как помочь с Firefox для iOS, и как интегрировать его с другими iOS-приложениями.</p> - -<h2 id="Mobile_web_development" name="Mobile_web_development"><a href="/en-US/docs/Web/Guide/Mobile">Mobile web development</a></h2> - -<p>У мобильные устройств разные аппаратные характеристики, отличающиеся от настольных или портативных компьютеров, и многие из API-интерфейсов, используемых для работы с ними все еще находятся в процессе стандартизации.</p> - -<p>Читайте о том, как разрабатывать веб-сайты, которые хорошо смотрятся на мобильных устройствах и воспользоваться новыми возможностями, которые они предлагают. Узнайте, как убедиться, что ваш веб-сайт хорошо работает на различных браузерах.</p> diff --git a/files/ru/mozilla/mobile/viewport_meta_tag/index.html b/files/ru/mozilla/mobile/viewport_meta_tag/index.html deleted file mode 100644 index c16a6df3a4..0000000000 --- a/files/ru/mozilla/mobile/viewport_meta_tag/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: >- - Использование метатега viewport для управления разметкой на мобильных - браузерах -slug: Mozilla/Mobile/Viewport_meta_tag -translation_of: Mozilla/Mobile/Viewport_meta_tag ---- -<h2 id="Введение">Введение</h2> - -<p>Мобильные браузеры отображают страницы в виртуальном «окне» (viewport, вьюпорт), которое, как правило, шире экрана устройства. Поэтому им не нужно сжимать макет каждой страницы в крошечное окно (что может сломать многие сайты, не оптимизированные под мобильные устройства). Пользователи могут изменять и масштабировать видимую область, чтобы видеть разные части страницы.</p> - -<p>В мобильной версии Safari появился "мета тег viewport" (viewport meta tag), который позволяет веб-разработчикам контролировать размер окна просмотра и масштаб страницы. Многие другие мобильные браузеры также поддерживают этот тег, хотя он не является частью какого-либо веб-стандарта. <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html">Документация</a> Apple хорошо описывает, как веб-разработчики могут пользоваться этим тегом. Но мы должны были провести расследование, чтобы точно выяснить, как его можно реализовать в Fennec. Например, в документации к Safari сказано, что контент представляет собой «список значений, разделенных запятыми», но существующие браузеры и веб-страницы используют любое сочетание запятых, точек с запятой и пробелов в качестве разделителей.</p> - -<p>Узнать больше о вьюпортах в разных мобильных браузерах можно в <a href="http://www.quirksmode.org/mobile/viewports2.html">Рассказе о Двух Viewport'ах</a> на quirksmode.org.</p> - -<h2 id="Основы_Viewport">Основы Viewport</h2> - -<p>Типичный сайт, оптимизированный для мобильных устройств, содержит следующий мета-тег:</p> - -<pre class="notranslate"><meta name="viewport" content="width=device-width, initial-scale=1"> -</pre> - -<p>Свойство <code>width</code> определяет размер окна просмотра. Он может быть установлен на определенное количество пикселей, скажем, <code>width=600</code> или на специальное значение <code>device-width</code>, которое означает ширину экрана в пикселях CSS в масштабе 100%. (Есть также соответствующие значения <code>height</code> и <code>device-height</code>, которые могут быть полезны для страниц с элементами, которые изменяют размер или положение на основе высоты окна просмотра).</p> - -<p>Свойство <code>initial-scale</code> контролирует уровень масштабирования при первой загрузке страницы. Свойства <code>maximum-scale</code>, <code>minimum-scale</code> и <code>user-scalable</code> определяют, как пользователям разрешено увеличивать или уменьшать страницу.</p> - -<div class="blockIndicator warning"> -<p>Использование <code>user-scalable=no</code> может вызвать проблемы с просмотром у пользователей с плохим зрением.</p> -</div> - -<h2 id="Пиксель_это_не_пиксель">Пиксель это не пиксель</h2> - -<p>В последние годы разрешение экрана увеличилось до такого размера, что отдельные пиксели трудно отличить человеческим глазом. Например, последние смартфоны обычно имеют 5-дюймовые экраны с разрешением выше 1920-1080 пикселей (~400 точек на дюйм). Из-за этого многие браузеры могут отображать свои страницы в меньшем физическом размере, переведя несколько аппаратных пикселей для каждого пикселя CSS. Первоначально это вызывало проблемы удобства использования и удобства чтения на многих веб-сайтах, оптимизированных для сенсорного экрана. Питер-Пол Кох написал об этой проблеме в <a href="http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html">«Пиксель это не пиксель»</a>.</p> - -<p>На экранах с высоким разрешением экрана страницы с <code>initial-scale=1</code> будут эффективно масштабироваться браузерами. Их текст будет плавным и четким, но их растровые изображения, вероятно, не будут использовать полное разрешение экрана. Чтобы получить более четкие изображения на этих экранах, веб-разработчики могут создать изображения - или целые макеты - в более высоком масштабе, чем их конечный размер, а затем масштабировать их с помощью свойств CSS или viewport. Это соответствует <a href="http://www.w3.org/TR/CSS2/syndata.html#length-units">спецификации CSS 2.1</a>, которая гласит:</p> - -<blockquote> -<p>Если плотность пикселей устройства вывода сильно отличается от плотности изображения на типичном дисплее компьютера, пользовательский агент должен масштабировать значения пикселей. Рекомендуется, чтобы блок пикселей ссылался на все количество пикселей устройства, которые наилучшим образом приближаются к опорному пикселю. Рекомендуется, чтобы опорный пиксель представлял собой угол зрения одного пикселя на устройстве с плотностью пикселей 96dpi и расстоянием от считывателя длины руки.</p> -</blockquote> - -<p>Для веб-разработчиков это означает, что размер страницы намного меньше, чем фактическое количество пикселей, и браузеры могут соответственно изменять их макеты и изображения. Но помните, что не все мобильные устройства имеют одинаковую ширину; Вы должны следить за тем, чтобы ваши страницы хорошо работали при большом изменении размеров и ориентации экрана.</p> - -<p>Отношение пикселей по умолчанию зависит от плотности дисплея. На дисплее с плотностью менее 200 точек на дюйм отношение равно 1.0. На дисплеях с плотностью от 200 до 300 точек на дюйм отношение равно 1.5. Для дисплеев с плотностью более 300 точек на дюйм отношение представляет собой целостный пол (<em>плотность</em> / 150 точек на дюйм). Обратите внимание, что коэффициент по умолчанию равен true только тогда, когда масштаб viewport равен 1. В противном случае соотношение между пикселями CSS и пикселями устройства зависит от текущего уровня масштабирования.</p> - -<h2 id="Ширина_Viewport_и_ширина_экрана">Ширина Viewport и ширина экрана</h2> - -<p>Сайты могут устанавливать свой viewport на определенный размер. Например, определение «<code>width=320, initial-scale=1</code>» может использоваться для точного размещения на маленьком дисплее телефона в портретном режиме. Это может вызвать проблемы, когда браузер не отображает страницу большего размера. Чтобы исправить это, браузеры, если необходимо, увеличат ширину окна просмотра, чтобы заполнить экран по заданной шкале. Это особенно полезно для устройств с большим экраном, таких как iPad. (Аллен Пайк <a href="http://www.antipode.ca/2010/choosing-a-viewport-for-ipad-sites/">Выбор видового экрана для IPad сайтов</a> дает хорошее объяснение для веб-разработчиков.)</p> - -<p>Для страниц, задающих начальный или максимальный масштаб, это значит, что свойство <code>width</code> фактически переводит в <em>минимальную</em> ширину viewport. Например, если ваш макет должен иметь ширину не менее 500 пикселей, вы можете использовать следующую разметку. Когда экран шириной более 500 пикселей, браузер будет расширять область просмотра (а не увеличивать), чтобы она соответствовала экрану:</p> - -<pre class="notranslate"><meta name="viewport" content="width=500, initial-scale=1"></pre> - -<p>Другими доступными <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#Attributes">атрибутами</a> являются <code>minimum-scale</code>, <code>maximum-scale</code>, и <code>user-scalable</code>. Эти свойства влияют на начальный масштаб и ширину, а также ограничивают изменения уровня масштабирования.</p> - -<p>Не все мобильные браузеры обрабатывают изменения ориентации таким же образом. Например, Mobile Safari часто просто увеличивает масштаб страницы при смене с вертикальной ориентации на горизонтальную, вместо того, чтобы выкладывать страницу так, как если бы она была первоначально загружена в "ландшафт". Если веб-разработчики хотят, чтобы их настройки масштаба оставались неизменными при переключении ориентации на iPhone, они должны добавить значение <code>maximum-scale</code>, чтобы предотвратить это масштабирование, которое иногда имеет нежелательный побочный эффект, который мешает пользователям изменять масштаб:</p> - -<pre class="notranslate"><meta name="viewport" content="initial-scale=1, maximum-scale=1"></pre> - -<p>Чтобы убрать это небольшое масштабирование, которое делают многие смартфоны, установите настройки начального масштаба и минимального масштаба равные 0.86. В этом случае горизонтальная полоса прокрутки будет убираться в любом положении экрана, и пользователь теперь сможет масштабировать экран свободно.</p> - -<pre class="notranslate"><meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86"></pre> - -<h2 id="Общепринятые_viewport_для_мобильных_и_планшетных_устройств">Общепринятые viewport для мобильных и планшетных устройств</h2> - -<p>Если вы хотите знать, какие мобильные и планшетные устройства имеют ширину viewport, здесь представлен полный <a href="https://docs.adobe.com/content/help/en/target/using/experiences/vec/mobile-viewports.html">список размеров видовых экранов для мобильных устройств и планшетов</a>. Это дает такую информацию, как ширина видового экрана на вертикальной и горизонтальной ориентации, а также физический размер экрана, операционную систему и плотность пикселей устройства.</p> - -<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('CSS3 Device', '#viewport-meta', '<meta name="viewport">')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>В ненормативном порядке описывается элемент Viewport META</td> - </tr> - </tbody> -</table> - -<p>Существует явный спрос на метатег viewport, поскольку он поддерживается большинством популярных мобильных браузеров и используется тысячами веб-сайтов. Было бы неплохо иметь настоящий стандарт для веб-страниц для управления свойствами viewport. По мере того, как продолжается процесс стандартизации, мы будем писать в Mozilla об его стадиях, чтобы вы были в курсе любых изменений.</p> |