Проверить мобильную версию сайта можно в браузере Chrome. Нажав Ctrl + Shif + I (правой мышкой по экрану – посмотреть код страницы) и затем Ctrl + Shif + M (или значок с телефоном/планшетом, который расположен вверху слева)
В верхней панели вы можете выбрать: устройство, масштаб и поворот экрана. Этот инструмент закрывает 90% ручной проверки отображения мобильной версии. Для остальных 10% стоит все же приобрести iPhone. Так как по моему опыту 99% клиентов проверяют моб версию на iOS устройствах.
Для проверки обычной версии сайта в хроме возможно использовать плагин, который будет переключать размер окна, тем самым имитируя разные размеры экрана. Например, Window Resizer.
Если у Вас нет мак-устройства, а тестировать необходимо. Можно установить macOS в виртуальной машине на компьютере с процессором intel. При этом скорость работы будет значительно медленен мак-устройства.
Также следует установить браузеры: Firefox, Opera.
Если клиент жалуется на верстку. Какие вопросы можно ему задать:
Браузера и его версия.
Какая ОС? Например, Сафари для iPhone и для Mac могут показывать верстку по-разному, а IE11 для Win7 и Win10 так же. (Существует еще пользователи с Win7 и IE11).
Банально, но клиент мог накрутить масштаб в браузере. Можно попросить нажать клиента: Ctrl + 0 или не обновились стили Ctrl + F5
Какое разрешение вашего экрана? Если клиент работает за ноутбуком, то для определения разрешения надо попросить его в консоли выполнить javascript: document.body.clientwidth. В зависимости от браузера можем получить разные разрешения.
Хорошим механизмом для проверки скорости загрузки сайта встроенным в браузер хром является «Lighthouse». С помощью него можно определить насколько по версии хрома мобильным устройствам удобно использовать ваш сайт, о нем подробней в этой статье.
Комментарии (18)
zila
25.07.2021 00:09+2Скучаю по старому хабрахабру.
maxshevtsov Автор
25.07.2021 00:10-2А что не так, я написал для новичков небольшую инструкцию, кому-то она будет полезна. И указал что для новичков. А тут все задизлайкали :)
Ivnika
25.07.2021 00:19У вас на каждом скрине - "Максим...", как в известной юмореске про шпингалеты, да и сам материал... ну уж совсем на новичков рассчитан, не уверен даже есть ли такие в природе
p.s. Не дизлайкал, не вижу смысла и не имею возможности )))
maxshevtsov Автор
25.07.2021 00:25Да это я понял, что сагрились из-за того, что скринов наделал со своего сайта, а не с клиентских или рандомных. 4 человека добавили в закладки значит есть.
Ivnika
25.07.2021 00:49+1Строго говоря я вообще не вижу смысла в отрицательной оценке материалов и пользователей. Если не нарушаются правила, значит минимум 0, если что-то полезное - в плюс. Сейчас отрицательная оценка больше "на эмоциях", а положительная больше зависит от популярности материала (про "котиков" легко наберет на порядок больше какой нить научной статьи). Но как говорится что имеем, то имеем.
maxshevtsov Автор
25.07.2021 01:11+1я с Вами согласен полностью, я написал на тему вордпреса и там набрал положительную карму, а в этой статье я не учел нюанс со своим сайтом вот и наминусовали :)
alfixer
25.07.2021 01:25+2Сайт тут ни при чем. Просто вы рассказываете совершенно очевидные вещи. Все равно, что прийти в коледж с лекцией "как умножать в столбик". Новичкам, которые только devtools открыли - да, полезно, но вряд ли тут такие обитают.
maxshevtsov Автор
25.07.2021 01:33Я в скобочках указал для новичков :)
ne555
25.07.2021 09:14-1Представьте, что будет, если каждая вторая статья на Хабре будет для новичков? Ресурс станет низкосортным, а это идет вразрез с политикой и аудиторией Хабра.
Минус за статью и в карму (фильтр).
alfixer
25.07.2021 12:36-1Хабр - портал спецов высокого уровня, а не библиотека для новичков. Новички вам не смогут поставить плюсик, потому что сначала надо доказать, что ты не новичок. А среднестатичтический обитатель Хабра такие элементарные знания вряд ли оценит. Если бы вы описали действительно редкую и уникальную информацию, детально описали проведенное исследование - тогда другое дело.
mister_pibodi
25.07.2021 01:20-1Честно говоря, тут нет ничего, чего бы не сказали тестеровщику/верстальщику/дизайнеру/программисту в его первый же день работы, а может быть даже раньше в универе или на каких-нибудь курсах.
mSnus
25.07.2021 05:06+1Не дай макаронный монстр какому-нибудь новичку нагуглить эту статью!
Если клиент работает за ноутбуком, то для определения разрешения надо попросить его в консоли выполнить javascript: document.body.clientwidth.
сколько ошибок вы тут видите?
- попросить клиента открыть консоль
- в консоли начать писать javascript:
- написать clientwidth вместо clientWidth
- и всё это для определения ширины окна, которое больше, чем clientWidth
- при чём тут ноутбук?? o_O
В одном предложении 5 ошибок, и весь остальной текст настолько же безграмотен.
… использовать плагин, который будет переключать размер окна
… клиент мог накрутить масштаб в браузере. Можно попросить нажать клиента: Ctrl + 0
...ради любопытства зашёл на сайт автора:
платежы, извинити ¯\_(ツ)_/¯
)
)vlad00777
25.07.2021 23:07Да, а еще можно попросить клиента открыть дев тулз на вкладке нетворк и отключить кэш, а то вдруг что закешировалось. Попросить зайти в настройки браузера что бы он сказал вам версию. Можно попросить указать так же масштаб в его ОС. (конец сарказма)
Обидно что ничего относительно нового статья не преподносит. 2021 год, можно было хотя бы упомянуть о Browserstack, Lambdatest, Responsively App.
Так же не сказано ни одного слова о том что при такой проверке в хроме нет никакой гарантии что это действительно будет так выглядеть, не говоря уже о других браузерах на андроид: Firefox, Duckduckgo, Samsung Browser, Opera...maxshevtsov Автор
25.07.2021 23:11+1Часть решений как Browserstack - платные (и 100 минут бесплатно тестирования не знаю много или мало). Я понимаю ваш вопрос об андроид, у меня есть устройства на андроид и я проверяю на них все ли норм, но клиенты за частую в 99% случаях смотрят на iPhone.
PersonalSecurity
Это какая-то реклама?
maxshevtsov Автор
Нет, но возможно выглядит так