Сайт

Отображение сайта на разных устройствах – Онлайн тест сайта на разных устройствах. Проверка разрешения сайта

28.06.2019

Содержание

Сервисы просмотра сайта на разных разрешениях экрана

Продолжая работать и размышлять над адаптивным дизайном блога я столкнулся с необходимостью просмотра сайта на разных разрешениях экрана. С развитием смартфонов и появлением множества разных размеров экранов полезно просмотреть как будет выглядеть ваш сайт на том или ином устройстве. Для решения этой задачи есть несколько вариантов. Для просмотра сайта на компьютере при меньших разрешениях нежели ваш монитор достаточно просто зайти в настройки экрана и выбрать нужно значение.

Еще есть вариант с использованием плагинов для бразуера, например Web Developer для Firefox, который также сущесвтует и для Google Chrome. Опция Resize позволяет изменить размер браузера до нужного вам значения.

Методы эти наиболее простые, но сейчас их уже недостаточно — просмотреть сайт на разрешениях экрана побольше или увидеть как он будет смотреться с мобильного не получится. Помнится недавно я рассматривал проект CrossBrowserTesting, позволяющий тестировать сайты во всех браузерах. Он крайне полезен для проверки кроссбраузерной верстки на разных OS и браузерах, однако разрешений экрана там было не так много. К тому же для его использования нужно было регистрироваться. Сегодня рассмотрю парочку более простых и доступных сервисов для быстрого просмотра сайта на разных разрешениях экрана.

Сервисы просмотра сайта на разных разрешениях экрана

Некоторые проекты позволяют только менять разрешение экрана, другие же имеют дополнительные функции. Я не буду детально их рассматривать, просто упомяну в обзоре, возможно, вам пригодятся.

Screenfly

Просто вводите ссылку на свой сайт и жмете кнопку Go, после чего увидите результат работы сервиса.

В меню есть несколько иконок для работы: список вариантов размера экрана для компьютеров, планшетов, смартфонов, телевизора + возможность указать любое произвольное значение. Дальше идут разные дополнительные функции, например, отображения скролбара, использование проекта через прокси, есть даже возможность поделиться ссылкой на результаты просмотра. Все предельно просто.

Кстати, под доменом quirktools.com скрывается еще парочка интересных простых сервисов:

  • Smaps — создание карт сайтов или просто иерархической схемы.
  • Wires — вот это классная штука, которая позволяет создавать макеты веб-страниц с помощью разных функциональный блоков (текста, табов, форм, кнопок и т.п.)

Cybercrab Screencheck

Максимально простой сервис для просмотра разных разрешений экрана. Здесь также есть перечень наиболее популярных устройств, из которых нужно выбрать свое.

Весьма симпатичный дизайн у проекта.

Browserstack

Этот сервис похож на CrossBrowserTesting, поскольку дополнительно позволяет оценить ваш сайт на разных браузерах и ОС. Причем он также требует регистрацию и имеет платные функции. Хотя для просмотра разных разрешений экрана это не обязательно — переходите в пункт меню Responsive.

По дизайну и функциональности все очень круто сделано, чего только стоит возможность для смартфонов выбирать варианты просмотра Portrait и Landscape. Да, в остальных сервисах имеется функция поворота (Rotate), но, согласитесь, так все смотрится намного ярче. Кстати, если я правильно понял, то после регистрации вы сможете использовать опцию живого интерактивного тестирования в реальном времени.

Responsivepx

Сервис в духе минимализма. Здесь есть поле для ввода названия сайта + возможность выбора размеров экрана для просмотра.

InfoByIp

Еще один максимально простой проект. Кроме адреса сайта и размеров представлены наиболее популярные разрешения экрана для вашего удобства.

Если внимательно посмотреть на низ картинки, то можно увидеть, что сервис InfoByIp показывает наличие нижней полосы прокрутки при разрешении 1024х768. Если же изменить разрешение монитора вручную, то можно увидеть, что скролбара там никакого нет. Подобные неточности в некоторых сервисах немного удручают, не будете же вы линейкой перемеривать достоверность отображаемого результата. Именно поэтому советую осуществлять просмотр сайта на разных разрешениях экрана, используя парочку разных сервисов на всякий случай.

tods-blog.com.ua

Как проверить сайт на разных разрешениях экрана. 3 простых способа

Бывает необходимость посмотреть, как выглядит сайт на разных разрешениях экрана. Особенно, если сайт адаптивный для мобильных устройств, т.е. корректно трансформируется под разные разрешения экрана. В этой статье мы рассмотрим несколько способов, с помощью которых можно сделать проверку сайта на разных разрешениях экрана.

Для чего это может пригодиться?

Например, по статистике своего сайта можно проанализировать, — какие разрешения экрана и в каком процентном отношении используют посетители вашего сайта:

Затем можно посмотреть, как отображается ваш сайт на устройствах с данными разрешениями. Если вам разработали/разрабатывают адаптивную версию сайта, посмотрев, как выглядит сайт в разных разрешениях, можно обсудить с разработчиком какие-то детали.

Также, если на вашем сайте используется уже какой-то определенный адаптивный шаблон, то можно посмотреть, как выглядит сайт в разных разрешениях и принять решение, — использовать данный шаблон или заняться поиском другого.

Как посмотреть сайт на разных разрешениях экрана

Есть много способов, чтобы сделать просмотр сайта в разных разрешениях экрана. Так, например, основные разрешения экранов для сайта можно было бы посмотреть вообще простыми средствами Windows, изменив разрешение экрана в разделе Настройки экрана:

Но, данный способ не совсем удобен, а также он дает возможность посмотреть, как выглядит сайт только с основными разрешениями экранов компьютера.

Проверка сайта в браузере. Разрешение экрана

Другой способ просмотра сайта в разных разрешениях экрана дают встроенные возможности браузеров. Например, в Гугл Хром, находясь на нужном сайте, нажимаем правой кнопкой мыши и выбираем Просмотреть код (либо пользуемся комбинацией клавиш, как показано на снимке):

Появляется дополнительная панель с кодами сайта, где для включения просмотра сайта в разных разрешениях нажимаем на специальную вкладку (1), как показано на снимке ниже.

Для выбора разных мобильных устройств используем выпадающее меню (2). Справа также указывает разрешения экрана на выбранном устройстве. Чтобы развернуть экран устройства, — пользуемся соответствующей кнопкой (3):

А более удобный способ проверки сайта на разных разрешениях экрана дают специальные онлайн сервисы.

Просмотр разрешения экрана сайта в Screenfly

Это один из самых удобных (при этом, — бесплатный) на текущий момент сервисов, с помощью которого можно быстро посмотреть сайт не только на основных, а вообще на разных разрешениях экрана!

Переходим в сервис Screenfly. Вводим в предлагаемое поле проверяемый сайт и получаем результат (прокомментирую под снимком):

Первые вкладки позволяют просмотреть сайт со всеми основными популярными разрешениями экрана. Т.е. можно посмотреть, как выглядит сайт при просмотре на нетбуках или ноутбуках, на планшетах, мобильных телефонах, в телевизорах.

Дополнительные функции:

  1. Можно задать вручную конкретный размер разрешения экрана
  2. Можно развернуть экран по горизонтали или вертикали
  3. Можно включить скроллинг, чтобы просматривать страницы сайта вниз-вверх.
  4. Можно скопировать ссылку на просмотр текущего выбора. Может пригодиться, если нужно обсудить с кем-либо отображение сайта с конкретным разрешением

Другие сервисы для проверки разрешения экрана сайта

В общем-то, вышеприведенный сервис удовлетворит практически любые потребности в проверке разрешения экрана сайта. Но, если он будет недоступен или хочется попробовать что-то другое, то вот, на всякий случай, еще парочка сервисов: Сybercrab и Infobyip.

ПОДЕЛИТЕСЬ В СОЦ.СЕТЯХ:

infodio.ru

Посмотреть как сайт выглядит на разных устройствах – проверка адаптивности гугл

Как проверить отображение сайта на мобильных устройствах

Мобильные устройства активно вытесняют настольные PC и ноутбуки в качестве инструмента для доступа к Интернету. Сложно не согласиться с тем, что читать любимые сайты, да и просто серфить в Сети, лежа дома на диване или сидя где-нибудь за чашечкой кофе – гораздо удобнее, чем сидеть на одном и том же месте, перед экраном компьютера.

Для бизнеса это тоже звоночек – количество мобильного трафика в среднем уже составляет более 30% от всех интернет-пользователей, а в некоторых тематиках уже вплотную приблизилось к отметке 50%. И это даже если говорить о коммерческих тематиках, не говоря уж об информационных сайтах.

Так что адаптивная версия дизайна сайта или интернет-магазина – это в наше время уже необходимость.

Как выглядит сайт на разных устройствах?

А ее отсутствие может быть критической ошибкой, из-за которой бизнес теряет клиентов и недополучает прибыль.

В этой заметке я поделюсь с вами сразу несколькими способами проверить, как ваш сайт отображается на смартфонах и планшетах. Для этого можно воспользоваться как специальными сервисами, так и встроенными средствами браузера Google Chrome.

Responsivetest.net

Хорошее юзабилити и применение современных технологий в процессе разработки, делают этот сервис очень удобным инструмент. После перехода на главную, автоматически подгружается сайт-пример, на котором можно поэкспериментировать при изучении функционала.

Для проверки адаптивности дизайна сайта-пациента, можно выбрать устройство из списка (смартфоны, планшеты, PC):

Или, указать собственное разрешение на выбор, просто указав цифры в соответствующем поле:

Доступна и полоса прокрутки, чтобы можно было лучше все разглядеть.

Screenfly

Сервис для тестирования отображения сайта на экранах различного разрешения, который стабильно входит в подборку самых популярных инструментов такого рода. Для начала работы просто вводим адрес сайта в строку, и нажимаем кнопку «Go». Ну а теперь просто выбираем устройство из списка:

Стоит отметить, что выбор довольно широкий – от мобильных телефонов и до телевизоров, как аналогового разрешения, так и HD. Результатом можно поделиться с другими людьми, для чего достаточно нажать кнопочку «Share»:

Смотрим сайт на разных устройствах в Chrome

Этим браузером, несомненно, пользуется большинство из наших читателей, и, если перед вами стоит задача проверить отображение сайта на мобильных, сделать это можно при помощи встроенных в него инструментов.

Перейдите на нужную страницу и нажмите кнопку F12 на клавиатуре. Откроется дополнительная панель инструментов справа, на которой нужно нажать на иконку «Toggle device mode»:

Вкладка преобразиться, и теперь, в выпадающем меню «Responsive» можно указать устройство, экран которого вы хотите эмулировать:

Ну, вот и все. Главное преимущество такого способа – отсутствие необходимости в использовании сторонних сервисов. Все можно сделать средствами самого браузера.

steptosleep.ru

Быстрый способ протестировать сайт в разных десктопных браузерах / Habr

Всё больше достойных поводов находится у веб-разработчиков для того, чтобы отказаться от полнокровной поддержки IE6 в создаваемых проектах.

Кто-то обеспечивает малой кровью graceful degradation, ну а кто-то радикально прощается со старыми браузерами, чуть ли не нарочно приправляя сайт современными технологиями и показывая в браузерах-старичках заглушку с предложением срочно обновиться.

Однако, всем категориям веб-разработчиков, равно как и их клиентам, полезно иметь не обременяющие средства для кроссбраузерного тестирования.

Самый надёжный способ — поднять несколько виртуальных машин, где всё можно будет досконально протестировать (в том числе потаскать границу окна, поскроллить и уж тем более посмотреть, как работает JS). Но ведь часто требуется просто взглянуть на сайт и понять, всё ли с ним в порядке в целом. Либо предоставить такую возможность заказчику.

Классикой жанра для решения поставленной задачи является веб-сервис:

Универсальный, но долгий browsershots.org

Он позволяет получить скриншот не только из конкретного браузера, но и выбрать его версию и ОС, в которой браузер запущен.

Недостаток один — очередь. Скриншотов нужной страницы можно прождать полчаса и даже больше.

Я искал решения, которые существуют

в виде веб-сервисов и не требуют обязательной регистрации или оплаты. То есть те, которыми мог бы воспользоваться не только разработчик, но и его заказчик, в качестве независимого инструмента (встречался с неприятной ситуацией когда у заказчика стояла в IE какая-то полуварезная панель, перекраивающая оформление адресов электронной почты — не ехать же в такой ситуации к заказчику со своим ноутбуком).

Нашлось два подходящих веб-сервиса, выдающих скриншоты уже через несколько секунд ожидания, но с общим недостатком — дружат только с IE, но этого-то обычно и не хватает, ведь остальные браузеры кросс-платформенные и многие из них позволяют держать сразу несколько portable-версий на одной машине без виртуализации.

Многоцелевой www.thumbalizr.com и его IE7

Этот сервис вообще-то создан для создания «превьюшек» сайтов и даже снабжён соответствующим API, но если отправить его делать скриншот такой хитрой страницы, как inet.ya.ru, то становится ясно, что в качестве движка для рендеринга скриншотов на сервисе трудится IE7. И он пригодится любому, кто обновил IE до восьмого, либо не пользуется Windows совсем.
Оптимальный ipinfo.info/netrenderer

Сервис умеет делать скриншоты в IE 5.5 (для некрофилов), IE 6, 7 и 8. То есть отлично подходит для тестирования. Также имеется режим, где на одном скриншоте показываются различия в вёрстке между IE6 и IE7. Удобно, но, надеюсь, в будущем можно будет сравнивать и с восьмым IE сразу.
Удобный browserling.com с возможностью поскроллить и покликать

Про сервис рассказали в комментариях. Он хорош, потому что единственный из перечисленных позволяет покликать, поскроллить, потестировать JS (вы получаете что-то вроде VNC-доступа к удалённому окошку с нужным браузером). Недостаток для такого шикарного сервиса предсказуем — очередь желающих. Хотя визуализирована она на славу:

Browserling предоставляет в ваше распоряжение любой IE от 5.5 до 9, а также последние версии Opera, Chrome, Safari и Firefox. Очередь при этом общая, вне зависимости от того, на какой браузер вы записывались. Из-за этого лично мне откровенно хочется отшлёпать тех, кто занимает очередь с целью погонять доступный на всех платформах Firefox.

После того, как вы своей очереди дождётесь — в вашем распоряжении будет пять минут, потом вас дропнут и если вы чего-то проверить не успели, то придётся снова занимать за «крайним» (в момент тестирования сервиса встречал очереди и по 10 персон, но отмечу, что многие впереди «стоящие» — очередь бросали либо мучали сервис меньше доступных пяти минут). Справедливости ради надо сказать, что есть и платный вариант без очередей.

Ваша версия

Очень жду в комментариях ссылок на аналогичные сервисы, но, предлагаю, придерживаться описанных выше критериев: сервис должен быть общедоступным без регистрации и бесплатным.

habr.com

О жизни виртуальной и реальной

Среда, Сентябрь 12, 2018, 18:47 | В записную книжку, Интернет | 7 237 просм. | 6 комментариев

Засилье смартфонов и увеличение количества «вкусных» тарифов для пользователей мобильного Интернета приводит к тому, что на сайты все чаще заходят с мобильных телефонов, чем с десктопных компьютеров. Если сайт невозможно /трудно / неудобно просматривать на экране мобильного — это неизбежная потеря посетителей.

Если вы сделали мобильную версию сайта, ее необходимо протестировать, причем важно знать, как она выглядит на экранах разных популярных гаджетов.

Существует несколько способов для просмотра сайта при различных разрешениях экрана. Самый простой — менять размер экрана браузера вручную и смотреть, что происходит. Однако этот способ следует признать неточным, приблизительным. Поэтому создано немало сервисов, которые позволяют эмулировать просмотр указанных URL-ов на различных устройствах. Для себя я разделила их на две группы.

Первая группа сервисов не сильно отличается от доморощенного: вы вручную вводите нужные значения разрешения экрана. Если вы заранее точно знаете, какие разрешения экрана вас интересуют, а также если вам необходим просмотр при произвольном значении, которого нет в списке устройств на других сайтах (ни один из них, естественно, не может предоставить полный список), то такие сервисы оптимальны для ваших нужд. Вот пример таких сайтов.

Responsivepx

Вводите в поле URL страницы и с помощью ползунка меняете цифры ширины и высоты экрана.

Вторая группа сервисов имеет готовый набор эмуляторов мобильных устройств. Такие сервисы, в свою очередь, я тоже разделила на две группы. Первая позволяет сразу после указания ссылки посмотреть ее при различных разрешениях на одной странице. Здесь вас не заставляют выбирать вручную последовательно мобильные устройства. И хотя выбор разрешений при этом может быть невелик, он покрывает самые распространенные форматы, и незаменим, если вам нужно быстренько пробежаться по ним, не вдаваясь в подробности. Пример сервиса такого типа:

Mattkersley


Автор этого ресурса, похоже, отличается высокой мнительностью: когда я воспользовалась им для отладки и, соответственно, перезагружала одну и ту же страницу несчетное количество раз, на следующий день я обнаружила, что мой тестируемый сайт забанен для просмотра. Смешно…

Прочие сервисы этой группы предлагают определенный список устройств, и, указав адрес страницы, вы можете оценить ее представление на экране нужного вам устройства. Таких сервисов больше всего. Вот некоторые из них.

Infobyip


Выбор нужного разрешения осуществляется кликом по ссылке после ввода тестируемого URL. Для удобства у всех устройств указаны их разрешения. Впрочем, это удобство имеется у всех сервисов подобного типа.

В следующих сервисах выбор нужного разрешения осуществляется с помощью графического меню, а не текстового.

Screenfly (сайт Quirktools.com)

Здесь больше наворотов, чем в предыдущих сервисах. Он объединяет все выше перечисленные возможности: просмотр страницы на экранах самых распространенных мобильников, планшетов, различных разрешений мониторов десктопных компьютеров, а также на телевизорах. Вручную выбрать разрешение, которого нет в списке, тоже можно — необходимый функционал находится под пятой кнопкой слева в меню. Еще здесь можно эмулировать вращение экрана, смотреть страницу при разрешенном и запрещенном скроллинге. Очень удобная примочка — кнопка Refresh: удобно, когда посмотрел, нашел ошибку, поменял что-то на странице — и нужно только нажать кнопочку, а не вводить URL заново. Фрейм со страницей размещен на рабочем столе с линейкой, так что всегда можно видеть, с каким разрешением экрана работаешь, на заглядывая в подсказку.

Просто один в один Скринфлаю еще один сервис —

Techiepool

Techiepool.com

Даже кнопки меню расположены почти в том же порядке, что и на Screenfly, так что подробно на нем останавливаться не будем, просто см. описание выше.

What Is My Screen Redolution

Удобный простой интерфейс, мне понравилось с ним работать. Выбор разрешений — десктопных, мобильных, планшетных, ТВ — весьма велик, но если вам его недостаточно, можно ввести разрешение вручную. Кроме того, есть возможность поворота экрана, кнопка Refresh.

Browserstack

Дизайнерская фишка: нужную вам страничку вы здесь можете посмотреть прямо в обрамлении мобильного устройства. В меню 13 видов устройств от мобильных до десктопных (Windows 7, 1280×1024, MacOSX Yosemite 1920×1080).

Схожим образом организован интерфейс на последнем из рассматриваемых сегодня сервисов —

Mobilephoneemulator

Меню находится справа. Вводите URL в третий сверху блок меню, выбираете нужное устройство для просмотра. Причем сервис покажет вам все технические характеристики выбранного устройства а также укажет, какой браузер там обычно используется — все это по ссылочкам под вопросительными знаками. Также можно выбрать ориентацию экрана — портретная или ландшафтная. Еще одна весьма полезная примочка — просмотр либо Screen size, либо Real size. Первый определяется возможностями дисплея (физического размера пикселя), второй зависит от размера и разрешения экрана. Насколько я понимаю, для большинства устройств это одно и то же, но данный селектор как нельзя более актуален для современных мобильных устройств с высоким разрешением (до 1920х1080). Впрочем, в списке их нет…

 


 

Настроили внешний вид страниц сайта? Протестировали? Не забудьте проверить, что думают поисковики по поводу оптимизированности вашего сайта для мобильных:

Google

Яндекс. Проверка мобильных страниц

Сюда посторонних не пускают, требуется авторизация. Просмотр возможен только для ваших сайтов, то есть тех, на которые вы подтвердили права в Яндекс.Вебмастере.

Оценка производится на основе наличия meta-тега viewport, отсутствия больших картинок, «тяжелых» и неподдерживаемых мобильными устройствами элементов на странице (например, flash), а также представления контента: он не должен вылезать за пределы экрана ни в горизонтальном направлении, ни в вертикальном.


Похожие записи:

aprikablog.com

Как посмотреть на сайт с разных устройств ? (планшеты, смартфоны, телефоны, декстопы)


Новости о браузере Firefox, и о Mozilla в частности. http://firefox-me.ru 5th Февраль 2017 😉

Боитесь что ваш сайт будет выглядеть плохо на разных устройствах ?


Тогда вам нужно проверить его на всех этих устройствах. Но на практике эту задачу не решить, поэтому есть несколько вариантов обойтись без самих устройств:

  1. Специализированные сайты для просмотра сайта на разных устройствах
  2. Встроенные возможности современных браузеров

Специализированные сайты для просмотра сайтов в разном разрешении и на разных устройствах:

  1. https://www.browserstack.com/ (платный)
  2. http://deviceponsive.com/?url=http%3A%2F%2Ffirefox-me.ru
  3. http://ami.responsivedesign.is/?url=http://firefox-me.ru
  4. http://beta.screenqueri.es/
  5. http://quirktools.com/screenfly/#u=http%3A//firefox-me.ru&w=1024&h=600



Но по сути вся задача таких сервисов сводится к тому что бы увидеть как адаптивный дизайн разместиться в разных расширениях. Эту задачу можно решить просто изменяя размер браузера. Иногда подставляя нужные агенты в заголовки запросов.
Для решения этой задачи существуют следующие инструменты:

http://lab.maltewassermann.com/viewport-resizer/ — скрипт, букмарклет

https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh Расширение для Chrome

Встроенные возможности Chrome позволяют не только указать резрешение, но и выбрать желаемый девайс, указать UserAgent, и создать свое устройство.

Надо сказать что и Google есть свой похожий сервис, однако он лишь проверяет, оптимизирована ли страница для мобильных устройств:

Но !

Мы-то с вами находимся на блоге http://firefox-me.ru , и блог наш о браузере Firefox. Поэтому давайте рассмотрим возможности Firefox для проверки адаптивного дизайна на разных девайсах.
Зайдем на сайт Firefox и нажмем F12.

Дальше найдите и нажмите значек мобильного устройства:

Дальше вы увидите интерфейс разработанный Mozilla специально для проверки адаптивного дизайна. Можете снова нажать на F12 что бы убрать Панель для разработчиков.

Что мы имеем ?
  1. 1. Быстро выйти из режима адаптивного дизайна
  2. 2. Изменить разрешение и создать свой пресет
  3. 3. Повернуть устройство
  4. 4. Симулировать событие прикосновения
  5. 5. Сделать Скриншот
  6. 6. Изменить UserAgent
  7. 7. Менять размеры окна

Создание нового пресета происходит присовоения имени для текущих настроек, и тут нет дополнительного интерфейса как в Chrome, что не уменьшает качества данного инструмента, но делает его более простым и понятным.

Достаточно ли этой функциональности ?

Я бы добавил большое количество пресетов с названиями устроств. А больше кажется ничего и не нужно.
На этом наш обзор заканчивается.

Всего вам хорошего.

Сегодня: 2019.12.02

firefox-me.ru

Как сайт выглядит на разных устройствах?

Доброго всем времени суток, мои дорогие друзья и гости моего блога. Помнится мне, что еще всего лишь три года назад я и слыхом не слыхивал о таком понятиии, как адаптивная верстка или мобильная версия. Зато сегодня без нее уже любой сайт кажется неполноценным. Представьте, вы заходите на сайт с мобильного телефона, а он там в натуральную величину и с мелким шрифтом.

То есть вам постоянно приходится увеличивать, прокручивать, что жутко неудобно. А мобильная версия или адаптивная верстка все эти проблемы убирают. Я даже помню, что после того, как поставил адаптивный шаблон на свой первый проект, то мне стало интересно, как сайт выглядит на разных устройствах. Для этого я воспользовался одним замечательным сервисом. И сегодня я вам о нем расскажу.

Но вообще на самом деле, эта штука нужна еще и затем, чтобы вы посмотрели верстку вашего ресурса и увидели всё косяки. Потому что на обычной и мобильной версии всё может быть хорошо, а вот на планшетах всё может фиговенько. Поэтому такими проверками тоже нужно пользоваться, когда вы создает свой ресурс.

Я в свое время не использовал, а потом оказалось, что есть косяки в отображении на разных гаджетах. Теперь приходится обращаться к другим верстальщикам за помощью.

Самый наверное популярный сервис, на котором можно увидеть, как себя ведет сайт, это quirktools.com. Зайдите на него и вы увидите простенький cepвис с интуитивно-понятным интерфейсом. Только убедитесь, что вы находитесь на вкладке Screenfly.

Теперь впишите адрес вашего сайта в специальную строчку, после чего вы увидите свой ресурс в своем обычном состоянии. Ну а дальше начнется самое интересное. В верху есть несколько значков, означающих различные устройства: Компьютеры, планшеты, телевизоры, телефоны. Нажав на любой значок, вам раскроется выпадающее меню с определенными разрешениями и моделями, которые ему соответствуют.

Например, я хочу посмотреть, как будет выглядеть моё детище на телефоне Samsung Galaxy S3 с разрешением 360*440. Я пойду на значок телефона и выберу нужное разрешение. Кстати тут за эталон как раз взята линейка Galaxy S, поэтому я выбрал свою модель.

И теперь всё удачно подстроилось. Ну и конечно же не стоит ограничиваться одним разрешением. Давайте проверим везде, где только можно. И кстати в меню есть еще одна интересная кнопочка — Поворот. Благодаря ей мы можем знать, как выглядит наш сайт, если экран перевернуть на 90 градусов.

ami.responsivedesign.is

Еще один сервис проверки, который мне очень понравился — http://ami.responsivedesign.is/. Зайдите на сайт и в специальном поле впишите адрес искомого ресурса, после чего нажмите GO. В результате вы увидите аж четыре различных отображения для четырех устройств.

Чем примечателен этот ceрвис, так это тем, что здесь всего четыре популярных разрешения для устройств, но все они показываются одновременно, благодаря чему вы можете видеть общую картину. Здорово, да?

deviceponsive.com

deviceponsive.com очень похож на вышеописанный, но различных вариантов экранов здесь в два раза больше. Так что заходите спокойно на сaйт, прописывайте в строчку свой, ну а далее просто прокручиваете страницы с просмотром.

Плюсом этого сервиса, как и предыдущего, является то, что вы не просто смотрите отображение, а еще и можете эмулировать работу на этих устройствах, например прокручивать, нажимать и т.д.

Mobile/Responsive Web Design Tester

Ну и конечно я не могу не упомянуть какого-нибудь расширения в браузере. Ведь во многих случаях с ним гораздо удобнее работать, нежели с каким-нибудь сервисом.

Для наших целей я рекомендую вам установить расширение в google chrome, которое называется Mobile/responsive Web Design Tester. После установки у вас в верху появится соответствующий значок, при нажатии на который вы можете выбрать любое из доступных разрешений (самых популярных моделей мобильников и планшетов), а также задать собственное в самом низу в разделе «Custom User Agent/Resolution».

Кстати, из всего описанного мной выше, этот способ единственный, кто отображает кроме адаптивной верстки еще и отдельные мобильные версии (vk.com), так что имейте в виду.

Работа с окном

И конечно же я не могу не упомянуть самый классический вариант проверки. Для того, чтобы посмотреть, как будет выглядеть сайт при разных разрешениях, нужно всего лишь открыть его в оконном режиме, а не в полноэкранном, после чего это окошко постепенно уменьшать.

Уменьшая это окно, содержимое нашего ресурса будет подстраиваться под размеры этого окошка. Вот так всё просто.

Но конечно же есть минусы у этих способов. Они не отображают, как выглядят caйты, у которых есть отдельная мобильная версия, а не адаптивная. Например vk.com и ok.ru. Когда мы заходим на них с устройства, то нас переносит на мобильную версию m.vk.com и m.ok.ru.

И вот тут и происходит главная запара. Единственное, что такие сaйты отображает, это описанное мной выше расширение для браузера. Тут всё работает четко. Кстати, если у вас есть какие-то свои любимые способы, то с удовольствием посмотрю их. Так что пишите в комментариях).

Ну а на этом я пожалуй свою статью буду заканчивать. Надеюсь, что она вам понравилась и вы не забудете подписаться на обновления моего блога, а также поделиться с друзьями в социальных сетях. Жду вас у себя снова. Пока-пока!

С уважением, Дмитрий Костин.

koskomp.ru

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *