Проверка адаптивного дизайна страницы, на разных устройствах
Всем привет!
Недавно разбирался с адаптивным дизайном, практиковался на простом сайте, сделал медиа запросы для старых/новых iPhone и для iPad. Проверял верстку через эмуляторы этих устройств в Mac OS X, и на физическом iPad.
Там все выглядело как нужно, но я решил проверить еще на сайтах, которые показывают твою верстку на различных устройствах (responsinator.com и тому подобные). К моему удивлению на этих сайтах я видел совершенно другую картину, нежели на эмуляторах iPhone/iPad.
Так как iPhone у меня нет, кому верить?
Эмуляторам и одному физическому iPad, или то, что показывают сайты для проверки адаптивного дизайна?
Я могу ошибаться, но:
если у вас через медиа-запросы, значит опирается все на разрешение пользователя? Поизменяйте размер браузера — и увидите как будет выглядеть на том или ином устройстве.
Также у хрома в профайлере в настройках в Overrides есть Device Metrics и User Agent. Поиграйтесь с этими данными, от чего у вас зависит ваша верстка — и все.
Также там есть полезные вещи вроде геопозиции, угла наклона устройства, эмуляция тач-событий и media запросов вроде print
Люди будут открывать сайт в iPad, а не в эмуляторе, так что лучше проверять на кроссбраузерность лучше в самих браузерах, в которых он будет открываться.
Ты же через хром не открываешь эмулятор Лисы, а качаешь и открываешь через нее, так и с другими браузерами и устройствами надо.
