0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<h2>Проверка на реальных устройствах</h2>
1
<h2>Проверка на реальных устройствах</h2>
2
<p>Проверка адаптивной вёрстки - важная часть вёрстки. Лучше всего проверять не после написания всех стилей, а в процессе создания. Это позволяет контролировать весь процесс разработки и даёт возможность быстро исправить стили без изменения большого количества вёрстки.</p>
2
<p>Проверка адаптивной вёрстки - важная часть вёрстки. Лучше всего проверять не после написания всех стилей, а в процессе создания. Это позволяет контролировать весь процесс разработки и даёт возможность быстро исправить стили без изменения большого количества вёрстки.</p>
3
<p>Как же проверять адаптивность? Лучший вариант - иметь десятки разных устройств. От разных мобильных устройств до мониторов с большим разрешением экрана. Но давайте признаемся честно - такое количество устройств мало кто имеет. Их нужно постоянно обновлять и покупать новые модели, а это сотни тысяч рублей ежегодно.</p>
3
<p>Как же проверять адаптивность? Лучший вариант - иметь десятки разных устройств. От разных мобильных устройств до мониторов с большим разрешением экрана. Но давайте признаемся честно - такое количество устройств мало кто имеет. Их нужно постоянно обновлять и покупать новые модели, а это сотни тысяч рублей ежегодно.</p>
4
<p>В связи с этим, первый шаг при проверке адаптивности сайта - использование тех устройств, которые вы сейчас имеете. Телефон, ноутбук, компьютер. Необходимо проверять на всех этих устройствах. Не стоит забывать и о кроссбраузерности - отображении макета в различных браузерах.</p>
4
<p>В связи с этим, первый шаг при проверке адаптивности сайта - использование тех устройств, которые вы сейчас имеете. Телефон, ноутбук, компьютер. Необходимо проверять на всех этих устройствах. Не стоит забывать и о кроссбраузерности - отображении макета в различных браузерах.</p>
5
<p>Выходом из ситуации с проверкой на разных устройствах является использование специального программного обеспечения.</p>
5
<p>Выходом из ситуации с проверкой на разных устройствах является использование специального программного обеспечения.</p>
6
<h2>Инструменты разработчика в браузере</h2>
6
<h2>Инструменты разработчика в браузере</h2>
7
<p>Почти все современные браузеры позволяют просмотреть сайт так, как он выглядел бы на различных разрешениях экрана. На примере браузера<em>Google Chrome</em>проверим страницу профессий на сайте Хекслета.</p>
7
<p>Почти все современные браузеры позволяют просмотреть сайт так, как он выглядел бы на различных разрешениях экрана. На примере браузера<em>Google Chrome</em>проверим страницу профессий на сайте Хекслета.</p>
8
<p>Для этого необходимо:</p>
8
<p>Для этого необходимо:</p>
9
<ul><li>Перейти на интересующую нас страницу.</li>
9
<ul><li>Перейти на интересующую нас страницу.</li>
10
<li>Открыть панель разработчика. Это можно сделать с помощью комбинации Ctrl (CMD) + Shift + I</li>
10
<li>Открыть панель разработчика. Это можно сделать с помощью комбинации Ctrl (CMD) + Shift + I</li>
11
</ul><ul><li>Перейти в режим<em>Toggle device toolbar</em>. Это можно сделать комбинацией Ctrl (CMD) + Shift + M</li>
11
</ul><ul><li>Перейти в режим<em>Toggle device toolbar</em>. Это можно сделать комбинацией Ctrl (CMD) + Shift + M</li>
12
</ul><p>Теперь можно выбрать различные типы устройств или выставить необходимое разрешение экрана и проверить, как выглядит сайт.</p>
12
</ul><p>Теперь можно выбрать различные типы устройств или выставить необходимое разрешение экрана и проверить, как выглядит сайт.</p>
13
<p><em>Страница профессий на iPhone X в горизонтальной ориентации</em></p>
13
<p><em>Страница профессий на iPhone X в горизонтальной ориентации</em></p>
14
<h2>Онлайн-сервисы для проверки адаптивности</h2>
14
<h2>Онлайн-сервисы для проверки адаптивности</h2>
15
<p>Помимо встроенных средств браузера для проверки адаптивности, существуют и специальные онлайн-сервисы. Они могут показать не только отображение сайта на мобильном устройстве, но и указать на типичные ошибки. Например, недостаточный контраст элементов или маленький размер шрифта.</p>
15
<p>Помимо встроенных средств браузера для проверки адаптивности, существуют и специальные онлайн-сервисы. Они могут показать не только отображение сайта на мобильном устройстве, но и указать на типичные ошибки. Например, недостаточный контраст элементов или маленький размер шрифта.</p>
16
<p>Одним из таких сервисов проверки адаптивности страницы под мобильные устройства является созданный компанией Google сервис<a>Mobile Friendly</a>. Указав в сервисе ссылку на вашу страницу, вы получите сообщение о том, оптимизирован ли ваш сайт под использование на мобильных устройствах.</p>
16
<p>Одним из таких сервисов проверки адаптивности страницы под мобильные устройства является созданный компанией Google сервис<a>Mobile Friendly</a>. Указав в сервисе ссылку на вашу страницу, вы получите сообщение о том, оптимизирован ли ваш сайт под использование на мобильных устройствах.</p>
17
<p>Если ваш сайт указан в<em>Google Search Console</em>, то вы сможете видеть данную статистику по всем страницам вашего сайта.</p>
17
<p>Если ваш сайт указан в<em>Google Search Console</em>, то вы сможете видеть данную статистику по всем страницам вашего сайта.</p>
18
<p>Зарегистрировав ваш сайт в<a>панели вебмастера Яндекса</a>, вы также можете воспользоваться инструментом<em>Проверка мобильных страниц</em>, который проанализирует страницу на вашем сайте и выдаст отчёт о доступности на мобильных устройствах.</p>
18
<p>Зарегистрировав ваш сайт в<a>панели вебмастера Яндекса</a>, вы также можете воспользоваться инструментом<em>Проверка мобильных страниц</em>, который проанализирует страницу на вашем сайте и выдаст отчёт о доступности на мобильных устройствах.</p>
19
<p>Ещё один популярный сервис -<a>BrowserStack</a>. Хоть он и является платным, но его возможности позволяют проверить страницу почти во всех доступных связках операционных систем и браузеров. У сайта есть бесплатный период, во время которого можно протестировать страницы и посмотреть, как работает приложение.</p>
19
<p>Ещё один популярный сервис -<a>BrowserStack</a>. Хоть он и является платным, но его возможности позволяют проверить страницу почти во всех доступных связках операционных систем и браузеров. У сайта есть бесплатный период, во время которого можно протестировать страницы и посмотреть, как работает приложение.</p>
20
<p><em>BrowserStack</em>часто используется в компаниях, поэтому его знание - хороший навык для любого верстальщика</p>
20
<p><em>BrowserStack</em>часто используется в компаниях, поэтому его знание - хороший навык для любого верстальщика</p>
21
<p>Если бюджет команд ограничен, то рекомендуем использовать сервис<a>Lambda Test</a></p>
21
<p>Если бюджет команд ограничен, то рекомендуем использовать сервис<a>Lambda Test</a></p>