5 бесплатных сервисов для проверки адаптивности сайта
Время прочтения 6 минут
Почему так важно проверять сайты на адаптивность? По данным Яндекс.Метрики, количество людей, пользующихся мобильными устройствами в России, приближается к 50% и постоянно растёт.
В связи с этим поисковые системы стремятся сделать мобильную выдачу удобнее для пользователей. В феврале 2015 г. Google заявляет, что наличие адаптивной или мобильной версии положительно сказывается на ранжировании. Ровно через год, в феврале 2016-го, Яндекс объявляет то же самое.
Какими качествами должен обладать адаптивный сайт
- Отсутствие горизонтальной прокрутки.
- Быстрая загрузка, отсутствие тяжелых картинок.
- Корректно прописан метатег viewport.
- Интерактивные элементы (ссылки, кнопки, формы и т.д.) не находятся слишком близко друг к другу.
- Отсутствие Flash -элементов, Silverlight- плагинов.
- Удобная навигация по разделам.
- Контент (текст и картинки) адаптирован под размер экрана и читаются без увеличения.
Сервисы для онлайн-проверки адаптивности сайта
- Google Mobile Friendly — https://search.google.com/test/mobile-friendly
Отображает, как выглядит первый экран сайта на смартфоне, даёт общую оценку качества оптимизации.
Преимущества
- Официальный сервис Google.
- Указывает на конкретные ошибки.
- Умеет сам определять наличие мобильной версии.
Недостатки
- Нельзя посмотреть, как выглядит сайт при разных размерах экрана.
- Показывает только первый экран, нельзя взаимодействовать с сайтом.
- Яндекс.Вебмастер Mobile Friendly — https://webmaster.yandex.ru/site/tools/mobile-friendly/
В отличие от инструмента от Google проверить можно только свои ресурсы, на которые вы подтвердили права в Яндекс.Вебмастере. Показывает общую оценку и показывает, как сайт выглядит на смартфоне.
Преимущества
- Официальный сервис Яндекса.
- Указывает на конкретные проблемы в оптимизации.
- Понимает, есть ли у сайта мобильная версия.
- Проверить можно только свои сайты.
- Нет возможности посмотреть, как выглядит сайт на разных экранах
Недостатки
- Проверить можно только свои сайты.
- Нет возможности посмотреть, как выглядит сайт на разных экранах
- Quirktools — http://quirktools.com/screenfly/
Удобный и функциональный сервис, есть возможность посмотреть, как будет выглядеть сайт на различных устройствах от смартфонов до телевизоров.
Преимущества
- Можно выбрать из готового списка устройств или задать собственное разрешение
- Можно взаимодействовать с сайтом
Недостатки
- Не умеет определять наличие мобильной версии
- Нет списка ошибок
- Iloveadaptive — http://iloveadaptive.com/
Сервис, с помощью которого можно проверить адаптивность под популярные мобильные устройства и операционные системы.
Преимущества
- Есть возможность посмотреть, как выглядит сайт на разных операционных системах (IOS и Android)
- Сам понимает, есть ли мобильная версия
- Расширение для Google Chrome
Недостатки
- Нельзя самому указать размер экрана, только выбрать из готового списка
- Нет списка ошибок
- Всегда автоматически загружает мобильную версию, без возможности посмотреть, как выглядит десктопная версия при разных разрешениях
- Adaptivator — http://adaptivator.ru/
Преимущества
- Подводит общую оценку качеству оптимизации, дает советы по исправлению ошибок.
- «Не видит» мобильную версию.
- Нет возможности указать свой размер экрана.
Недостатки
- «Не видит» мобильную версию.
- Нет возможности указать свой размер экрана.
Вывод
При наличии доступа к сервисам веб-мастеров (Яндекс.Вебмастер или Google Search Console) проводить тест на адаптивность лучше всего с их помощью. Они отражают наиболее актуальные требования поисковых систем к вашему сайту.
Если же такой возможности нет, то можно воспользоваться http://iloveadaptive.com/ в связке с http://adaptivator.ru/, так как они дополняют друг друга по функционалу.
Как проверить сайт на адаптивность?
Приветствую вас на сайте Impuls-Web!
В данной статье мы поговорим с вами о том, как проверить адаптивность вашего сайта.
На сегодняшний день адаптивность сайта является очень важным параметром. Большинство современных тем и шаблонов уже идут с адаптивным дизайном. Однако этот дизайн не всегда качественный и очень часто приходится вносить различные правки и доработки.
Навигация по статье:
Для того, что бы проверить, на сколько качественный адаптивный дизайн вашего сайта мы можем воспользоваться одним из нескольких онлайн-сервисов, а так же встроенным функционалом браузеров.
Начнем с онлайн-сервисов.
Сервис ami.responsivedesign
Самый первый онлайн-сервис называется ami.responsivedesign. Попадая на главную страницу данного сервиса, прокручиваем вниз и в поле для ввода вставляем адрес сайта, который мы хотим проверить на адаптивность. После чего нажимаем на кнопку «Go».
Спустя некоторое время мы можем просмотреть, как выглядит наш сайт на различных устройствах. При этом мы можем сразу же прокручивать страницу, кликать по каким-то элементам, переходить на другие страницы и т.д.
В принципе этот сервис достаточно не плохой что бы с его помощью проверить адаптивность, но у него есть один значительный недостаток, который заключается в том, что он показывает, как выглядит ваш сайт на нескольких, наиболее популярных разрешениях.
Однако на сегодняшний день те же планшеты или мобильные телефоны могут иметь различные размеры экранов и соответственно различное разрешение. Поэтому полной картины данный сервис не дает.
Сервис deviceponsive
Для того, что бы получить больше информации об адаптивности вашего сайта переходим к следующему сервису, и называется он deviceponsive.
На главной странице есть окошко для вставки адреса сайта.
Вставляем адрес и нажимаем кнопку «Go» и ждем, пока загрузится страница.
Далее, прокручиваем вниз и первое устройство, которое мы видим, это MacBook с разрешением 1280х800 пикселей. Здесь мы так же можем прокручивать страницу, кликать на нужных элементах, и проверить адаптивность.
Прокручиваем ниже, и смотрим, как выглядит сайт на других устройствах.
Здесь мы можем проверить адаптивность, на экранах начиная от 1280х800 пикселей и заканчивая 320х240 пикселей.
Как видите, данный сервис дает на много больше сведений, чем предыдущий.
Во-первых, здесь отображаются точные размеры экрана, а во-вторых мы можем проверить адаптивность не просто на определенной ширине, а благодаря специфической рамке мы можем видеть более полную картину, как смотрится наш сайт на том или ином устройстве.
Сервис responsinator.com
На сайте responsinator.com в самом верху есть окошко для вставки ссылки. Вставляем адрес и нажимаем «Go». Ждем, пока загрузится страница, а затем, аналогично предыдущему сервису, просматриваем, как выглядит наш сайт.
На этом сервисе подписана ширина экрана каждого из устройств, и таких устройств здесь достаточно много.
Так же хочу сразу отметить, что не смотря на то, что последние два сервиса дают довольно полную картину отображения вашего сайта на разных видах устройств, все равно вы не можете быть уверены, что на конкретном устройстве с конкретным разрешением все будет выглядеть именно так, как показано в том или ином сервисе. Это связано, прежде всего, с тем, что на разных устройствах могут быть установлены различные браузеры, и в зависимости от особенностей определённого браузера какие-то элементы могут отображаться немного по-разному.
Поэтому, хоть эти сервисы и удобны в использовании и дают нам довольно много информации о внешнем виде вашего сайта на мобильном устройстве, тем не менее, есть такая вероятность, что на реальном устройстве все будет выглядеть немножко иначе.
Помимо этих трех онлайн-сервисов мы так же можем воспользоваться стандартным функционалом браузеров что бы проверить адаптивный дизайн. Я сейчас покажу вам, как это будет на примере браузера Mozilla Firefox.
Проверить сайт на адаптивность при помощи браузера Mozilla Firefox
Здесь, для того, что бы проверить адаптивность, нам необходимо:
- 1.В правом верхнем углу нажать на иконку меню.
- 2.Затем выбрать здесь раздел «Разработка» => «Адаптивный дизайн».
- 3.После чего у нас окошко немножко изменится. В верхнем левом углу отображается разрешение области, и дальше мы эту область можем, при помощи маркеров, уменьшать, увеличивать, изменять ее пропорции и смотреть, на какой ширине как у нас отображается те или иные элемент.
- 4.Так же мы можем здесь вводить разрешение в ручную. Например, если мы хотим увидеть, как будет выглядеть наш сайт при разрешении 320х480, мы вводим нужное значение и нажимаем «Enter».
В принципе, вы можете в любом браузере уменьшать окно самого браузера и смотреть, как уменьшаются элементы на странице. Но для разработчиков данный метод не очень удобен, потому что вы не видите, на каком именно разрешении происходит тот или иной сбой элементов, возможно у вас где-то что-то начинает вылезать за область экрана, или наоборот элементы налезают друг на друга. Для того, что бы это исправить, вам необходимо знать точную ширину экрана, на которой происходит этот сбой.
Проверить адаптивность в браузере Google Chrome
Адаптивный дизайн можно проверить и в браузере Google Chrome. Открывается он аналогично:
- 1.В правом верхнем углу кликаем на иконку меню.
- 2.Здесь выбираем раздел «Дополнительные инструменты» и далее выбираем раздел «Инструменты разработчика».
- 3.В нижней или в правой части экрана у вас появиться панель, на которой нам необходимо нажать на кнопку с изображением мобильных телефонов.
- 4.Далее, мы можем эту панель немножко опустить вниз. Для этого наводим курсор на границу, зажимаем левую кнопку мышки и протягиваем ниже.
- 5.Здесь вы аналогичным образом можете увеличивать или уменьшать ширину экрана.
Так же в раскрывающемся списке «Responsive» вы можете выбирать различные устройства, на которых вы хотите проверить отображение вашего сайта. В зависимости от выбранного устройства будет подстраиваться определенное разрешение.
Так же здесь вы сразу же можете изменить ориентацию экрана при помощи кнопки «Rotate».
Данный инструмент тоже довольно таки не плохой, но я в большинстве случаев использую встроенный инструмент браузера Mozilla Firefox. Потому, что уже не раз замечала, что этот же инструмент в Google Chrome дает не большую погрешность.
То есть, он показывает, что, к примеру, на таком-то разрешении сайт выглядит вот так, а если я открываю страницу с реального мобильного устройства с таким разрешением экрана, то вижу, что картина немножко отличается.
Поэтому при проверке адаптивности я больше ориентируюсь на браузер Mozilla Firefox.
Видеоинструкция
На этом у меня все. Спасибо вам за время, проведенное на моем сайте. Проверяйте адаптивность ваших сайтов, исправляйте все недочеты. Я желаю вашему проекту успешного развития и продвижения! Подписывайтесь на мою рассылку и до встречи в следующих статьях!
С уважением Юлия Гусарь
impuls-web.ru
5 отличных сервисов для проверки адаптивного (responsive) дизайна любого сайта
Здравствуйте, дорогие читатели блога. Как уже и не удивительно, что адаптивный дизайн становится всё популярнее в русском интернете. И конечно же верстальщикам нужно изучать его. Так как адаптивный дизайн скоро будет практически на всех сайтах, потому что всё больше лди пользуются мобильными устройствами.
И хочется сказать, что сайты с адаптивным дизайном на много удобнее читать на таких устройствах нежели без него.
Сегодня я хочу представить Вам 5 очень полезных и классных сервисов, с помощью которых Вы сможете проверить сайт на адаптивность.
И так, поехали.
5 сервисов на которых можно проверить сайт на адаптивность.
Хороший сервис для проверки сайтов. Есть множество разрешений экранов как планшетов так и телефонов.
Простой сервис для проверки сайта на адаптивный дизайн от Matt Kersley. Так же доступны все популярные разрешения мобильных девайсов.
Очень классный сервис, который проверит любой сайт. Очень понравилось оформление, а так же функциональность.
Очень красивый и функциональный сервис. Есть возможно даже проверить как будет выглядеть сайт на телевизоре 🙂
Ещё один, уже последний в данной подборке сервис с тоже не плохим функционалом.
Вот и всё, дорогие друзья, теперь Вы можете проверить сайт на адаптивность. Если Вы уже заметили, что блог beloweb.ru тоже имеет адаптивный дизайн и его очень удобно читать на мобильных устройствах. 🙂
До скорых встреч.
beloweb.ru
Как проверить адаптивный дизайн сайта — Технический блог
10 июля 2016 • HTML & CSS • Коментарии: 2Сегодня уже нет нужды убеждать кого-либо в необходимости мобильной версии сайта. Ведь с каждым днем посетителей со смартфонов и планшетов становится все больше и больше. На момент написания этой статьи около 20% посетителей моего блога используют мобильные устройства для просмотра. То есть каждый пятый заходит на мой сайт с телефона или планшета.
Несколько лет назад я даже не думал о таких посетителях, но когда их количество превысило 10% от общего числа я стал использовать адаптивную верстку. Это позволило корректно отображать контент на мобильных устройствах и повысить лояльность к сайту как посетителей, так и поисковых систем.
Мобильная версия сайта и адаптивный дизайн — это не одно и тоже. В данной статье речь пойдет о тестировании адаптивной верстки, когда дизайн сайта, меняется в зависимости от разрешения экрана устройства посетителя.
Чтобы быть уверенным, что ваш сайт правильно отображается на мобильных устройствах необходимо произвести проверку, и для этого существует несколько полезных сервисов и инструментов.
Быстрая проверка адаптивной верстки
Популярный интернет обозреватель (браузер) Mozilla Firefox оснащен встроенным инструментов проверки дизайна сайта на пригодность к отображению на мобильных устройствах. Чтобы им воспользоваться зайдите в «Меню» — «Разработка» — «Адаптивный дизайн». Либо просто нажмите на клавиатуре одновременно три клавиши [Ctrl]+[Shift]+[M]
Вы должны увидеть примерно следующую картину:
Изменяя разрешение и ориентацию экрана можно проверить как будет отображаться ваш сайт у мобильных посетителей.
Браузер Google Chrome так же имеет встроенную поддержку проверки адаптивности дизайна сайта. Для этого заходим в меню, выбираем пункт «Дополнительные инструменты» и затем «инструменты разработчика» (либо нажимаем клавишу [F12]).
После этого нажимаем иконку адаптивного дизайна (либо одновременно нажимаем на клавиатуре [Ctrl]+[Shift]+[M]):
В середине экрана вы увидите как будет отображаться ваш сайт на экранах мобильных устройств:
SEO тестирование мобильного дизайна
Как известно у двух мировых поисковых лидеров Google и Яндекс есть свое нескромное мнение как должен выглядеть сайт на экранах мобильных устройств. И если сайт признается неудобным для мобильных посетителей, то он понижается в поисковой выдаче. Таким образом, с точки зрения SEO, если вы не хотите потерять мобильных посетителей, то у вас должен быть не только адаптивный дизайн, но и поисковые системы должны считать его таковым, то есть пригодным для мобильных устройств.
Для проверки адаптивности с помощью сервиса Google заходим по следующему адресу и вбиваем имя своего сайта: https://www.google.com/webmasters/tools/mobile-friendly/.
Вот так выглядит результат проверки моего блога:
С Яндексом немного сложнее, для проверки надо обязательно зарегистрироваться в сервисе Яндекс.Вебмастер и воспользоваться бета версией интерфейса:
Он-лайн сервисы по проверки адаптивности
Основной задачей этих сервисов презентовать (показать) как будет выглядеть ваш сайт на мобильном устройстве. Сайтов с таким функционалом великое множество. Я приведу лишь некоторые из них. В большинстве случаев они дублируют встроенный функционал FireFox и Chrome.
Google resizer
Начну опять же с Google, у которого есть свой сервис демонстрации адаптивности: http://design.google.com/resizer/#
Quirktools screenfly
Второй симпатичный сервис — это http://quirktools.com/screenfly/. Он покажет как может выглядеть ваш сайт даже на телевизоре!
Symby.ru adaptest
Ну и чтобы не обидеть «отечественного производителя» приведу пример еще одного сайта: http://symby.ru/adaptest/. На одной странице вы увидите сразу несколько представлений с различными разрешениями экранов.
Скорость работы мобильной версии сайта
После того, как вы убедились, что ваш сайт адаптивный и корректно отображается на экранах большинства устройств, следует проверить скорость его работы. Опять же применительно к мобильным посетителям.
PageSpeed Insights
Google как всегда впереди планеты всей: https://developers.google.com/speed/pagespeed/insights/. Этот сервис покажет как выглядит сайт на экране телефона и даст рекомендации по оптимизации кода для увеличения скорости загрузки на мобильных устройствах.
WebPageTest
И в заключении приведу пример сервиса, который не только покажет как выглядит сайт на мобильном устройстве, но и покажет скорость его работы: http://www.webpagetest.org/
Выводы
На мой взгляд в повседневной работе при внесении изменений в дизайн сайта проще использовать встроенные возможности браузеров FireFox и Chrome. После чего, конечно же, необходимо проверить лояльность поисковых систем к вашему дизайну. А уже потом, для успокоения души или чтобы похвастаться, можно воспользоваться онлайн сервисами.
Поделись этой страницей с друзьями!
moonback.ru
Как проверить скорость загрузки и адаптивность сайта: 10 бесплатных инструментов
Контент – король, когда его донесли до целевой аудитории. Если пользователь ушел из-за медленной загрузки сайта или просто не смог прочитать текст, который плохо отображался – увы. Тогда потенциальный клиент, скорее всего, пойдет искать дальше и найдет вашего конкурента.
Рассказываем, какими инструментами можно проверить скорость загрузки сайта и его адаптивность.
5 сервисов для проверки скорости загрузки сайта
Факт: скорость загрузки влияет и на позиции в поиске, и на конверсии. Утверждение из блога Google для вебмастеров.
Вывод: надо проверять скорость загрузки сайта и делать все необходимое для ее увеличения. Даже 100 миллисекунд решают.
Список инструментов для анализа скорости загрузки сайта:
1. PageSpeed Insights
PageSpeed Insights от Google оценивает эффективность страниц для мобайла и десктопа, дает рекомендации по оптимизации сайта.
Важно: оценка от 1 до 100 зависит не только от скорости загрузки. Это внутренняя метрика сервиса, основанная на ряде правил. Рекомендации PageSpeed Insights не стоит воспринимать как призывы к действию, о чем предупреждают и сами разработчики.
В общем, тут как с «Главредом» – нельзя слепо подгонять под максимальное количество баллов, надо думать головой.
2. Pingdom Tools
Pingdom Tools показывает оценку Google PageSpeed Insights, время загрузки, количество запросов и размер страницы. Еще в сводке виден результат сравнения с другими тестируемыми сайтами.
Если полистать отчет ниже, можно также найти конкретные элементы, влияющие на скорость загрузки.
К сожалению, не получится посмотреть, как быстро страница подгружается в России. Можно выбрать для теста только Швецию, США или Австралию.
3. WebPageTest
Сервис не очень с точки зрения дизайна, зато дает больше выбора в плане локаций – их свыше 40 (правда, РФ опять нет в списке). Плюс есть возможность выбрать разные браузеры и даже устройства, если запускать тест из Далласа.
Еще в сервисе можно включить слайдшоу или видео, чтобы наглядно оценить, как идет загрузка страницы. И, наконец, WebPageTest умеет сравнивать скорость нескольких сайтов: добавляйте URL конкурентов и смотрите, как у них.
4. GTmetrix
Еще один сервис по проверке скорости загрузки сайта. Достоинства в сравнении с WebPageTest:
- Приятный интерфейс.
- Возможность выбрать скорость соединения.
- Дополнительная оценка от Yahoo – пригодится для продвижения за рубежом.
- Есть выгрузка отчета в PDF.
- Можно настроить регулярный мониторинг страницы. Бесплатно – не чаще 1 раза в день с сервера в Ванкувере.
Недостатки: мало браузеров, не получается выбрать для теста мобильное устройство, доступно только 7 локаций.
У GTmetrix есть и платная версия – для тех, кому нужно проверять больше, чаще и детальнее.
5. Sitespeed
Sitespeed позволяет проверить, как сайт загружается сразу с нескольких точек. Наконец-то, русскоязычный сервис и есть сервера РФ и Украины.
Если есть желание помочь проекту, вариант – стать спонсором: добавить свой сервер.
Чтобы проверить свой сайт, можно также использовать Google Analytics и «Яндекс.Метрику». В обеих системах есть отчеты по скорости (времени) загрузки сайта (страниц).
Как ускорить загрузку сайта?
5 сервисов для проверки сайта на адаптивность
Адаптивность, кроссбраузерность, кроссплатформенность – важные составляющие юзабилити сайта.
Так согласно данным CoMagic мобайл почти сравнялся с десктопом по числу конверсий.
Если же есть твердая уверенность, что на вашем сайте доминируют клиенты с ПК, стоит обратить внимание на пост-клик. Исследование Criteo показало: 20 % десктопных продаж совершаются после клика с мобильного устройства.
Мораль: надо одинаково уважать пользователей с разными устройствами, экранами, ОС и браузерами. Тогда и трафик пойдет, и конверсии будут.
Мы делаем лендинги уже более 5 лет. Добиваемся высокой конверсии любыми путями. Обращайтесь! ПодробнееПеречень инструментов для проверки на адаптивность /кроссбраузерность / кроссплатформенность:
1. Mobile-Friendy Test
Простенький сервис Google, позволяющий узнать – оптимизирована страница для мобильных устройств или нет. Плюс можно посмотреть проблемы, которые возникли при ее загрузке.
Никакой интерактивности и выбора разрешения – только скриншот первого экрана.
Кстати, в «Яндекс.Вебмастере» есть похожий инструмент – правда, там можно проверить лишь страницы собственного сайта.
2. Browserling
Browserling – инструмент кроссбраузерного тестирования. Как запустить:
- Выбрать нужную версию Android / Windows.
- Указать браузер вместе с версией.
- Нажать “Test now”.
Открывается полноценный эмулятор: можно переходить по ссылкам, открывать разные сайты.
Недостаток сервиса: бесплатная версия ограничена по времени пользования и количеству доступных браузеров. При том, что их и так мало представлено.
3. Adaptivator
Adaptivator – бесплатный сервис для проверки адаптивности. Дает оценку и рекомендации по оптимизации – предупреждает, если надо увеличить размер активных элементов, настроить область просмотра или поменять шрифт.
Проблема: пытаешься изучить, как сайты выглядят на разных устройствах – Adaptivator часто ссылается на то, что владельцы ресурса это запрещают. Однако другие сервисы спокойно открывают эти же сайты.
Адаптивная верстка vs. мобильный сайт4. Screenfly
Screenfly – такой же бесплатный, как Adaptivator, но более функциональный инструмент. Можно выбрать один из 30 вариантов экранных размеров или – прописать высоту и ширину самостоятельно.
Чтобы видеть все элементы страницы, надо еще включить прокрутку – нажать в меню на кнопку “Allow scrolling”.
5. I love adaptive
I love adaptive – удобный инструмент проверки на адаптивность и кроссплатформенность.
В панели справа можно подобрать нужную комбинацию устройства и операционных систем. Если нужно – также повернуть экран и отрегулировать зум.
Минус: для ПК и ноутбуков нельзя выбрать операционную систему. Еще для работы с некоторыми сайтами надо обязательно устанавливать расширение на Chrome.
Чтобы изучить, как с вашим сайтом взаимодействуют пользователи разных устройств, ОС и браузеров – используйте также соответствующие отчеты Analytics и «Метрики».
P. S. Если мы забыли какой-то важный и полезный инструмент, напомните в комментариях. И – будем благодарны за репосты.
Да пребудет с вами юзабилити!
Чек-лист по юзабилити: 200+ пунктов на проверку kak-proverit-skorost-zagruzki-i-adaptivnost-sayta-besplatnye-instrumentytexterra.ru
Проверить сайт на адаптивность
Предоставляем Вам окунутся в тему тестирования сайта на адаптивность, предлагаем проверить его онлайн, в браузерах Mozilla Firefox и Google Chrome на способность работать в любых разрешениях дисплеев.
Проверить сайт на адаптивность онлайн
Проверьте свой сайт на адаптивность, посетив наш онлайн сервис проверки на отображение сайта в мобильных устройствах. Испытания проводятся с размерами: 240 x 320, 320 x 480, 480 x 640, 768 x 1024 и 1024 x 768.
Проверить сайтПроверить сайт на адаптивность в Mozilla Firefox
Браузер мазила оснащён по умолчанию встроенной функцией для проверки адаптивного дизайна, поэтому остаётся только начать её использовать при необходимости.
Для начала найдите в правом верхнем углу браузера Mozilla Firefox кнопку меню панели инструментов.
После обнаружения кнопки, меню можно сразу на неё нажимать, откроется вкладка с инструментами.
На открывшейся вкладке есть пункт «Разработка» с картинкой в виде гаечного ключа, нажмите на неё.
Откроется ещё одна вкладка со списком инструментов для разработки, выберите пункт «Адаптивный дизайн».
Страница, на который Вы находились, перейдёт в режим проверки на адаптивность дизайна.
По умолчанию, режим адаптивного дизайна отобразит разрешение 320X480, нажмите на панель с указанными цифрами, откроется дополнительная вкладка с панелью выбора размера для проверки.
Выбирайте размеры окна проверки адаптивного дизайна страницы по своему усмотрению, при закрытии окна проверки, страница вернётся в первоначальное состояние.
Проверить сайт на адаптивность в Google Chrome
Чтобы проверить сайт на адаптивность в браузере Google Chrome, нужно установить дополнительное расширение, были исследованы некоторые из них, поделюсь впечатлениями.
Mobile/RWD Tester
Открывает дополнительное окно браузера выбранного размера, довольно неплохое решение, можно попробовать.
Responsive Web Design Tester
Тоже открывает дополнительное окно браузера, но при выборе не указываются размеры, вместо них названия устройств, был слегка разочерован.
Browser Resize
Для проверки отрывается окно браузера, ноо, что то к этому расширению инструкция как на самолёт, хотя по сути ничего необычного.
Responsive Inspector
Своё название «Инспектора» вполне оправдывает, проверяет таблицу стилей CSS страницы на которой активируется. Проверке подвергается наличие свойств @media. Это расширение для тех кто понимает смысл свойства определяющего тип носителя.
Screen Resolution Tester
Красочное название не всегда оправдывает надежды, в этом пришлось убедился установив это расширение, оно сжимает открытое окно браузера, а хотя может быть я и не прав.
Mobile View
Расширение простенькое, но со вкусом. Работает в 2 режимах, телефона и планшета, звезду им поставил, прикольно.
responsive-web-design
Явный лидер по красоте. Работает в 4 режимах + может добавить виртуальную клавиатуру, для активации перезагрузите страницу, нажмите на ней правой кнопкой мышки и выберите расширение.
Подытоживая, не могу настаивать на своём мнении, Вам нужно самим попробовать, и выбрать то, что понравится. Ваше мнение мне так же не безразлично, если найдётся время, не держите в себе.
atmpl.ru
Об онлайн сервисе ADAPTIVATOR.RU — бесплатная проверка сайта на адаптивность
ADAPTIVATOR.RU — это бесплатный сервис, предоставляющий возможность быстро проверить сайт на адаптивность онлайн.
С его помощью Вы сможете не только визуально просмотреть как будет выглядеть сайт на различных разрешениях портативных и мобильных устройств, но и получить оценку адаптивности тестируемого ресурса, вместе с рекомендациями по устранению выявленных недостатков. И все это на одной странице!
Обширные настройки сервиса позволяют отображать одновременно необходимые устройства в требуемых ориентациях, и даже, при необходимости, в нужных цветовых решениях.
Также сервис позволяет скопировать прямую ссылку на результат проверки, чтобы ею можно было поделиться и продемонстрировать все адаптивные возможности Вашего сайта.
Для выполнения проверки сайта на адаптивность необходимо только «ввести адрес Вашего ресурса» (указать URL) и нажать на кнопку «УЗНАТЬ».
Естественно, в первую очередь сервис создавался для веб-разработчиков, а также владельцев сайтов, заинтересованных в развитии своего интернет-ресурса и не желающие терять свою мобильную целевую аудиторию, использующую в повседневной жизни или на работе планшетные компьютеры или сотовые телефоны для выхода в сеть интернета.
Однако никто не запрещает пользоваться сервисом всем заинтересованным и любопытным лицам 🙂
Ограничения возможны только со стороны владельцев сайтов. Сервис не сможет отобразить как будет выглядеть сайт на выбранных Вами устройствах если установлен запрет на удаленное отображение контента. В этом случае Вы будете извещены об имеющемся ограничении.
С технической точки зрения сервис доступен пользователям и отлично функционирует во всех современных браузерах, начиная с версий: IE 7+, Chrome 3+, Safari 3.2+, Opera 9+, Firefox 3+.
Других ограничений на функционирование или использование сервиса нет.
Если у Вас остались какие-либо вопросы относительно сервиса и его работы, посетите раздел часто задаваемых вопросов, чтобы постараться найти там ответы.
adaptivator.ru