Где можно узнать как сайт выглядит на разных устройствах?

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

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

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

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

Quirktools.com

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

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

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

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

ami.responsivedesign.is

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

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

deviceponsive.com

[urlspan]deviceponsive.com[/urlspan] очень похож на вышеописанный, но различных вариантов экранов здесь в два раза больше. Так что заходите спокойно на с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йты отображает, это описанное мной выше расширение для браузера. Тут всё работает четко. Кстати, если у вас есть какие-то свои любимые способы, то с удовольствием посмотрю их. Так что пишите в комментариях).

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

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