Содержание
Как открыть мобильную версию сайта на компьютере
- Видео урок.
- Как открыть мобильную версию сайта на компьютере.
- Как определить цвет пикселя на экране.
- Как указать какой именно цвет я хочу.
- Почему я вижу разные цвета на разных устройствах.
- Как узнать, какой у меня браузер и какая у него версия.
- Где скачать браузер для Windows.
- Как узнать разрешение экрана на Windows 10.
- Как изменить масштаб экрана на компьютере Windows 10.
- Как изменить масштаб в браузере.
- Как записать видео с экрана.
В предыдущей статье «В помощь заказчикам. Ответы на часто задаваемые вопросы (часть 1)» мы рассмотрели ответы на такие вопросы: как почистить кеш браузера, как сделать снимок экрана (принтскрин), как узнать адрес страницы (URL), а также поговорили о сжатии (архивации) файлов и отправке больших файлов по почте при помощи облачных хранилищ.
В этой статье продолжим разбор часто задаваемых вопросов, которые слышу от своих клиентов.
В основном речь пойдёт о компьютерах под управлением Windows 10 и затронем смартфоны на базе Android 8.1.
Видео обзор
- Как открыть мобильную версию сайта на компьютере – 00:00:37.
- Как определить цвет пикселя на экране – 00:05:19.
- Как указать, какой именно цвет я хочу – 00:06:51.
- Как узнать, какой у меня браузер и какая у него версия – 00:07:47.
- Как узнать разрешение экрана на Windows 10 – 00:09:37.
- Как изменить масштаб экрана на компьютере Windows 10 – 00:10:21.
- Как изменить масштаб в браузере – 00:11:26.
- Как записать видео с экрана – 00:12:50.
Видео лучше просматривать с качеством 720 HD. Этот и другие видео уроки можете найти на каналах сайта Aleksius.
com в YouTube, Mail.ru.
Ссылки из видео:
- Предыдущая статья «В помощь заказчикам. Ответы на часто задаваемые вопросы (часть 1)».
- Программа для определения цвета на экране Just Color Picker.
- Подбор цвета на сайте ColorScheme.Ru.
- Бесплатная программа для записи видео FlashBack Express.
- Как отправить большой файл по почте.
Как открыть мобильную версию сайта на компьютере
Если под рукой нет мобильного устройства или нужно проверить, как сайт, примерно, будет выглядеть на разных экранах, можно воспользоваться инструментами для веб-разработчиков. Они есть в каждом популярном браузере.
Обратите внимание, что то, что Вы увидите на экране своего монитора, может отличаться от того, что на конкретном мобильном устройстве. Это связано с разрешением экрана, его диагональю, браузером и его версией. Но всё равно это неплохой способ протестировать мобильную версию сайта.
Google Chrome 86.
0.4240.75. Смотрите видео с – 00:01:13. Откройте нужный Вам сайт. В правом верхнем углу нажмите на иконку с тремя вертикальными точками (рисунок ниже). В появившемся меню выберите Дополнительные инструменты, а затем — Инструменты разработчика.
После этого в окне браузера сайт сожмётся до определённых размеров. Вы можете менять размер области просмотра, путём выбора разных вариантов в спадающем списке над областью просмотра.
Как открыть мобильную версию сайта на компьютере в Google Chrome
Mozilla Firefox 81.0.1. Смотрите видео с – 00:02:29. Откройте нужный Вам сайт. В правом верхнем углу нажмите на иконку с тремя горизонтальными линиями (рисунок ниже). В появившемся меню выберите Веб-разработка, а затем — Адаптивный дизайн.
После этого в окне браузера сайт сожмётся до определённых размеров. Вы можете менять размер области просмотра, путём выбора разных вариантов в спадающем списке над областью просмотра.
Как открыть мобильную версию сайта на компьютере в Mozilla Firefox
Opera 71.
0.3770.228. Смотрите видео с – 00:03:00. Откройте нужный Вам сайт. В левом верхнем углу нажмите на Меню (рисунок ниже). В появившемся меню выберите Разработка, а затем Инструменты разработчика.
После этого в окне браузера сайт сожмётся до определённых размеров. Вы можете менять размер области просмотра, путём выбора разных вариантов в спадающем списке над областью просмотра.
Как открыть мобильную версию сайта на компьютере в Opera
Edge 86.0.622.38. Смотрите видео с – 00:03:40. Откройте нужный Вам сайт. В правом верхнем углу нажмите на иконку с тремя горизонтальными точками (рисунок ниже). В появившемся меню выберите Другие инструменты, а затем — Средства разработчика.
После этого в окне браузера сайт сожмётся до определённых размеров. Вы можете менять размер области просмотра путём выбора разных вариантов в спадающем списке над областью просмотра.
Как открыть мобильную версию сайта на компьютере в Edge
Яндекс.
Браузер 20.9.1.8. Смотрите видео с – 00:04:35. Откройте нужный Вам сайт. В правом верхнем углу нажмите на иконку с тремя горизонтальными линиями (рисунок ниже). В появившемся меню выберите Дополнительно, затем Дополнительные инструменты и Инструменты разработчика.
После этого в окне браузера сайт сожмётся до определённых размеров. Вы можете менять размер области просмотра, путём выбора разных вариантов в спадающем списке над областью просмотра.
Как открыть мобильную версию сайта на компьютере в Яндекс.Браузере
Как определить цвет пикселя на экране
Смотрите видео с – 00:05:19. Иногда нужно определить цвет какой-то-то точки экрана (пикселя). Например, Вы хотите, чтобы цвет меню Вашего сайта был таким же, как края иконки (ярлыка) программы Skype у Вас на рабочем столе. Для точного определения Вам понадобится бесплатная программа. Например, Just Color Picker от AnnyStudio. Она бесплатная, русскоязычная и доступна для Windows 95-10 (32 и 64 бита), а также для macOS X 10.
6.6 х64 или более новых версий.
Шаг 1. Скачайте нужную версию программы с сайта разработчика. Я качал портативную версию «Download free Just Color Picker 5.5 for Windows (zip, 64 bit, portable, size 1.0MB)». И даже не устанавливал её.
Шаг 2. Распакуйте скачанный архив и запустите файл «jcpicker».
Шаг 3. Подведите курсор мыши к той точке на экране, цвет которой Вас интересует, нажмите на клавиатуре клавишу «Alt», не отпуская её, нажмите клавишу «X» (английская буква). В программу попадёт нужный Вам цвет (рисунок ниже).
В программе он может отображаться в тринадцати «форматах» представления цветов. Но для интернета, по большому счёту, понадобится только «формат» HTML. В моём примере это «2EB0F3». Именно этот код цвета можно отправить тому, кто делает сайт или использовать самому для смены цвета того или иного элемента сайта.
Как определить цвет пикселя на экране
Как указать какой именно цвет я хочу
Смотрите видео с – 00:06:51.
Если Вы хотите, чтобы сделали какой-то элемент сайта в конкретном цвете, лучше не писать что-то типа: бледно-каштановый, амарантово-розовый и т.д.. Лучше указать цвет в шестнадцатеричном формате. Его можно узнать, например, на сайте ColorScheme.Ru.
Шаг 1. Перейдите на сайт ColorScheme.Ru.
Шаг 2. Выберите нужный цвет в цветовом круге. Можно менять тон/оттенок выбранного цвета, перемещая точку внутри цветового квадрата (рисунок ниже).
Как узнать, какой именно цвет я хочу
Шаг 3. Когда закончите выбирать цвет, скопируйте его код из поля HTML. В моём примере это «2EB0F3». Именно этот код цвета можно отправить тому, кто делает сайт или использовать самому для смены цвета того или иного элемента сайта.
Почему я вижу разные цвета на разных устройствах
Часто бывают ситуации, когда один и тот же цвет одного и того же элемента сайта, например, логотипа, выглядит по-разному на разных устройствах (экранах). На это есть множество причин.
Вот некоторые из них:
- разные матрицы экранов.
- Разные настройки экранов (яркость, контрастность и т.д.).
- Разное программное обеспечение и разные его настройки.
Даже если у Вас два абсолютно одинаковых компьютера с одинаковыми мониторами, программным обеспечением и настройками, то всё равно цвет может отличаться. Подробнее об этом можно прочесть в статье «Почему разные устройства воспроизводят одно и то же изображение в разных цветах?» на сайте компании по производству компьютерной техники BenQ и в статье «Цветопередача» на сайте 3DNews Daily Digital Digest.
Даже на одном и том же устройстве один и тот же цвет одного и того же элемента сайта может с течением времени выглядеть иначе. Даже если Вы ничего не меняли в настройках. Причины:
- изменение угла, под которым Вы смотрите на экран.
- Изменение внешнего освещения. Особенно, если экран Вашего устройства автоматически подстраивается под внешнее освещение.
- В конце дня Ваши глаза могут устать.
А если незаметно пришло обновление браузера, драйвера видео-карты, операционной системы или другого программного обеспечения, которое могло влиять на цветопередачу, то это также могло стать причиной изменения цвета.
Как узнать, какой у меня браузер и какая у него версия
Смотрите видео с – 00:07:47. Судя по иконке той программы, которую Вы запускаете для доступа к интернету, а также подписи под ней Вы можете узнать, какой у Вас браузер. Иконки браузеров на компьютере совпадают с иконками этих же браузеров на мобильных устройствах.
На рисунке ниже приведены иконки популярных браузеров. Слева направо:
- Google Chrome. Или просто
- Microsoft Edge. Или просто Edge.
- Mozilla Firefox. Или просто Firefox.
- Opera.
- Яндекс.Браузер.
Вы можете видеть примерно такую иконку у себя на рабочем столе, в меню пуск и т.д. На рисунке ниже показаны ярлыки.
В меню пуск эти иконки отображаются без стрелочки в левом нижнем углу.
Как узнать, какой у меня браузер
Ниже показан пример иконки браузера Internet Explorer. Данный браузер уже не поддерживается его разработчиками и заменён на Edge.
Иконка Internet Explorer
Ниже показан пример иконки браузера Safari. Его актуальные версии доступны только в операционных системах семейства macOS.
Иконка Safari
Узнать версию браузера можно в самом браузере.
Google Chrome 86.0.4240.75. Смотрите видео с – 00:08:26. В правом верхнем углу нажмите на иконку с тремя вертикальными точками (рисунок ниже). В появившемся меню выберите Справка, а затем О браузере Google Chrome.
На появившейся странице Вы увидите версию браузера. В моём примере это «86.0.4240.75».
Как узнать версию браузера Google Chrome
Mozilla Firefox 81.0.2. Смотрите видео с – 00:08:35. В правом верхнем углу нажмите на иконку с тремя горизонтальными линиями (рисунок ниже).
В появившемся меню выберите Справка, а затем О Firefox.
На появившейся странице Вы увидите версию браузера. В моём примере это «81.0.2».
Как узнать версию браузера Mozilla Firefox
Opera 71.0.3770.228. Смотрите видео с – 00:08:45. В левом верхнем углу нажмите на Меню (рисунок ниже). В появившемся меню выберите Справка, а затем О программе.
На появившейся странице Вы увидите версию браузера. В моём примере это «71.0.3770.228».
Как узнать версию браузера Opera
Edge 86.0.622.38. Смотрите видео с – 00:08:56. В правом верхнем углу нажмите на иконку с тремя горизонтальными точками (рисунок ниже). В появившемся меню выберите Справка и отзывы, а затем О программе Microsoft Edge.
На появившейся странице Вы увидите версию браузера. В моём примере это «86.0.622.38».
Как узнать версию браузера Edge
Яндекс.Браузер 20.9.1.87. Смотрите видео с – 00:09:07. В правом верхнем углу нажмите на иконку с тремя горизонтальными линиями (рисунок ниже).
В появившемся меню выберите Дополнительно, а затем — О браузере.
На появившейся странице Вы увидите версию браузера. В моём примере это «20.9.1.87».
Как узнать версию браузера Яндекс.Браузера
Google Chrome 85.0.4183.127 (Android 8.1.0). Смотрите видео с – 00:09:16. В правом верхнем углу нажмите на иконку с тремя вертикальными точками (рисунок ниже). В появившемся меню выберите Настройки, а затем О браузере Chrome.
На появившейся странице Вы увидите версию браузера. В моём примере это «85.0.4183.127».
Как узнать версию браузера Google Chrome (Android 8.1.0)
Где скачать браузер для Windows
Рекомендую скачивать браузеры только с официальных сайтов их разработчиков:
- Google Chrome.
- Mozilla Firefox.
- Opera.
- Microsoft Edge.
- Яндекс.Браузер.
Как узнать разрешение экрана на Windows 10
Смотрите видео с – 00:09:37. На примере Windows 10 Pro, версия 2004, сборка 19041.
546.
Первый способ. Щёлкните на любом пустом месте рабочего стола правой кнопкой мыши. В появившемся меню выберите Параметры экрана.
Под описанием второго способа даны пояснения на счёт рекомендуемого разрешения.
Второй способ. Откройте меню Пуск и нажмите на иконку Параметры (рисунок ниже).
Пуск
В появившемся окне нажмите на иконку Система (рисунок ниже).
Система
В появившемся окне Вы узнаете разрешение экрана. В моём примере на рисунке ниже это «1920 х 1080 (рекомендуется)». Обратите внимание, на слово «рекомендуется». Оно должно там быть. Так как именно оно свидетельствует, что разрешение экрана, заданное в Windows, соответствует «физическому» разрешению экрана Вашего монитора. В противном случае могут быть «искажения» в размерах объектов на страницах сайта, и они могут быть «размыты».
Как узнать разрешение экрана на Windows 10
Как изменить масштаб экрана на компьютере Windows 10
Смотрите видео с – 00:10:21.
На примере Windows 10 Pro, версия 2004, сборка 19041.546.
Первый способ. Щёлкните на любом пустом месте рабочего стола правой кнопкой мыши. В появившемся меню выберите Параметры экрана.
Под описанием второго способа даны пояснения на счёт рекомендуемого масштаба.
Второй способ. Откройте меню Пуск и нажмите на иконку Параметры (рисунок ниже).
Пуск
В появившемся окне нажмите на иконку Система (рисунок ниже).
Система
В появившемся окне Вы сможете изменить масштаб изображения на экране в спадающем списке Масштаб и разметка (рисунок ниже). Рекомендую выставить 100% (рекомендуется).
Как изменить масштаб экрана на компьютере Windows 10
Если в спадающем списке Масштаб и разметка указано что-то отличное от 100% (рекомендуется), в таком случае могут быть «искажения» в размерах объектов на странице сайта. На рисунке ниже показан пример страницы сайта с масштабом 175% (верхняя часть изображения) и с масштабом 100% (нижняя часть изображения).
Разрешение экрана монитора – 1920 х 1080 пикселей.
Как видите, на экране с масштабом 175% все элементы сайта намного крупнее. А фото и другие растровые изображения могут потерять качество – появятся крупные квадратики по всему изображению и некая «размытость».
Пример сайта с разным масштабом экрана
Как изменить масштаб в браузере
Смотрите видео с – 00:11:26. На примере Mozilla Firefox 81.0.2. В верхней части рисунка ниже показан фрагмент страницы сайта с масштабом в браузере 100%, а в нижней – с масштабом 130%. Разрешение экрана монитора – 1920 х 1080 пикселей.
Как видите, размеры теста, кнопок социальных сетей, колонки страницы и изображения отличаются друг от друга. При этом, картинка на экране с масштабом 130% выглядит хуже (менее чёткая).
Чтобы увеличить масштаб в браузере (Google Chrome, Mozilla Firefox, Opera, Microsoft Edge, Яндекс.Драузер и, скорее всего, в других браузерах) зажмите на клавиатуре клавишу «Ctrl» и, не отпуская её, крутите колесо мыши вперёд (от себя), чтобы уменьшить масштаб – зажмите на клавиатуре клавишу «Ctrl» и, не отпуская её, крутите колесо мыши назад (на себя).
Чтобы привести масштаб к рекомендованным 100% зажмите на клавиатуре клавишу «Ctrl» и не отпуская её нажмите на клавиатуре кнопку ноль «0».
Пример сайта с разным масштабом в браузере
Как записать видео с экрана
Иногда бывают ситуации, когда нужно показать, что именно происходит на экране Вашего устройства. Так может быть проще объяснить, что Вам нужно. Для этой цели служат программы для записи видео с экрана. Плюс, они же позволяют записать и Ваш голос, если есть микрофон.
На примере Windows 10. Смотрите видео с – 00:12:50.
Шаг 1. Скачайте бесплатную русскоязычную программу для записи видео с экрана FlashBack Express. Она подходит для Windows 7-10 (32 и 64-битных версий).
Шаг 2. Установите FlashBack Express точно так же, как Вы устанавливаете любые другие программы. Можно просто нажимать «Далее» в окне программы во время её установки. В моём примере используется FlashBack Express Recorder 5.45.0 сборка 4606.
Шаг 3. В меню Пуск найдите и запустите FlashBack Express Recorder (рисунок ниже). Если Вы работаете с ограниченными правами, то, возможно, понадобится запустить программу от имени администратора.
Запуск FlashBack Express Recorder
Шаг 4. В появившемся окне нажмите кнопку Запись внизу по центру (рисунок ниже).
Как записать видео с экрана
Шаг 5. После того, как пройдёт отсчёт от 3 до 1, окно примет такой вид, как на рисунке ниже. Это значит, что запись началась. Передвиньте это окно или сверните его и выполните все действия, которые хотите записать. Например, пройдите регистрацию на Вашем сайте и покажите, на каком этапе появляются те или иные проблемы.
Запись видео с экрана
Шаг 6. Для завершения записи нажмите на кнопку с красным квадратом в белом круге.
Шаг 7. В появившемся окне нажмите на кнопку Сохранить и укажите место сохранения записи.
Шаг 8. Программа вернётся к первоначальному окну. Нажмите на кнопку Запись в левом верхнем углу (рисунок ниже).
FlashBack Express Recorder
Шаг 9. В появившемся окне нажмите на Экспорт напротив записанного Вами видео (рисунок ниже).
Экспорт записанного с экрана видео
Шаг 10. В появившемся окне нажмите Ок (рисунок ниже).
Экспорт видео
Шаг 11. В появившемся окне нажмите Экспорт (рисунок ниже).
Настройки экспорта видео
Шаг 12. Укажите папку для сохранения конечного видео и нажмите Сохранить. Дождитесь пока видео экспортируется. Скорость экспорта зависит от длительности видео и скорости/занятости Вашего процессора. У меня видео длительностью 3 минуты, 15 секунд сохранялось около полутора минут.
Сохранение готового видео
После этого можно отправить файл по почте, в Viber и т.д. Если размер файла очень большой, то посмотрите, как можно его отправить при помощи облачных хранилищ.
На примере Android 8.1.0. Смотрите видео с – 00:16:21. На примере приложения XRecorder 1.4.0.3.
Шаг 1. Перейдите в Google Play (Play Маркет) и установите бесплатное приложение XRecorder. Для удобства можете воспользоваться поиском, введя «XRecorder» (рисунок ниже).
Google Play (Play Маркет)
Шаг 2. Установите его как любое другое приложение (рисунок ниже). После этого запустите, нажав на кнопку Открыть.
Установка XRecorder
Шаг 3. Разрешите всплывающие окна (рисунок ниже).
Разрешение всплывающих окон
Шаг 4. Разрешите показывать XRecorder поверх других приложений и нажмите на кнопку возврата (рисунок ниже).
Разрешение отображения поверх других приложений
Шаг 5. Нажмите Ok (рисунок ниже) и разрешите приложению XRecorder доступ к фото, мультимедиа и файлам на Вашем устройстве.
Запуск XRecorder
Шаг 6.
Для записи видео с экрана Android нажмите на кнопку с красным кругом в нижней части приложения и, при необходимости, разрешите приложению XRecorder запись аудио. После этого Вы можете увидеть сообщение о быстрой записи. Если оно появится, прочтите его и нажмите Ok.
Запись видео с экрана Andropid
Шаг 7. Установите птичку напротив Больше не показывать, когда увидите сообщение: «Приложение XRecorder получит доступ к изображению на экране устройства» и нажмите Начать.
Разрешение доступа к изображению на экране устройства
Шаг 8. После того, как пройдёт отсчёт от 3 до 1, начнётся запись. Выполните все действия, которые Вы хотите записать. Вы можете комментировать свои действия голосом. Например, пройдите регистрацию на Вашем сайте и покажите, на каком этапе появляются те или иные проблемы.
Для остановки записи нажмите на оранжевый кружок в правой центральной части экрана, а затем — на иконку оранжевого квадрата в белом круге.
Это остановит запись (рисунок ниже).
Управление записью с экрана
Шаг 9. Нажмите на иконку трёх точек, соединённых двумя линиями (рисунок ниже).
Отправить видео
Шаг 10. В появившемся окне Поделиться с можете нажать на Больше и выбрать «способ», при помощи которого Вы хотите отправить записанное Вами видео кому-то другому.
Рекомендую, по возможности, выбрать Сохранить н… (Сохранить на Диск).
Способ отправки видео
В появившемся окне нажмите Сохранить (рисунок ниже). Дождитесь пока файл загрузится на Ваш Google Диск. Время зависит от размера файла и скорости Вашего интернет-соединения.
Сохранить на диске
А потом отправьте ссылку на видео по почте, в Viber и т.д. О том, как это можно сделать, читайте в статье «В помощь заказчикам. Ответы на часто задаваемые вопросы (часть 1)» со слов: «В Google Диске нажмите на файл или папку правой кнопкой мыши и выберите Открыть доступ».
Надеюсь, что эта и предыдущая статья были Вам полезны.
Если есть вопросы, задавайте их в комментариях. Стараюсь отвечать максимально оперативно.
| Автор статьи – Хорошевский Алексей |
|---|
| Похожие материалы |
|---|
|
Полезные ссылки:
- Программа для определения цвета на экране Just Color Picker.
- Подбор цвета на сайте ColorScheme.Ru.
- Бесплатная программа для записи видео FlashBack Express.
Как просмотреть мобильную версию WordPress-сайта с десктопного устройства?
В статье описывается два простых способа предварительного просмотра мобильной версии WordPress-сайта без необходимости переключения на другие устройства.
Важно помнить, что в большинстве случаев предварительный просмотр мобильной версии сайта не будет полностью идентичным. Потому что существует много различных размеров экрана и браузеров для мобильных устройств.
- Использование редактора тем WordPress
- Использование инструментов разработчика Chrome
- Как создать мобильный контент в WordPress
Войдите в панель администрирования WordPress и перейдите в меню Внешний вид» Настроить.
После этого откроется визуальный редактор темы оформления WordPress.
В нижней части экрана кликните по иконке мобильного телефона. После этого вы увидите, как сайт выглядит на мобильных устройствах.
Этот метод особенно востребован, когда вы еще не закончили создание сайта или когда он находится в режиме обслуживания.
Браузер Google Chrome включает в себя набор инструментов для разработчиков, которые позволяют выполнять предварительный просмотр сайта на мобильных устройствах. Для этого запустите Google Chrome на десктопном устройстве и перейдите на веб-страницу, которую хотите проверить.
Далее кликните правой кнопкой мыши и выберите пункт «Просмотреть код».
После этого с правой стороны откроется новая панель.
Затем нажмите кнопку Toggle Device Toolbar, чтобы перейти к мобильному представлению.
После этого область предварительного просмотра уменьшится до размера экрана смартфона. А также изменится внешний вид сайта.
Когда вы наведете курсор мыши на мобильное представление сайта, указатель примет форму круга:
Его можно перемещать с помощью мыши, чтобы имитировать сенсорное взаимодействие на мобильном устройстве. Над мобильным представлением сайта вы увидите несколько дополнительных параметров.
С их помощью можно проверить, как сайт будет выглядеть на разных типах смартфонов. А также имитировать производительность сайта при быстром или медленном соединении 3G. Вы даже можете повернуть экран мобильного устройства с помощью значка поворота.
Многие темы оформления и плагины позволяют создавать элементы, которые по-разному отображаются на ПК и мобильных устройствах.
Также можно использовать специализированный плагин. Например, Beaver Builder.
На мобильных устройствах формы должны запрашивать минимально необходимую информацию, хорошо выглядеть и легко закрываться. В этом вам может помочь плагин OptinMonster.
Мы надеемся, что эта статья помогла вам узнать, как просмотреть макет вашего сайта для мобильных устройств.
Вадим Дворниковавтор-переводчик статьи «How to View the Mobile Version of WordPress Sites from Desktop»
Как просмотреть мобильную версию веб-сайта: всего за 3 клика
Контент Themeisle бесплатный. Когда вы покупаете по реферальным ссылкам на нашем сайте, мы получаем комиссию. Узнать больше
Не знаете, как просмотреть мобильную версию веб-сайта?
Что ж, одно из очевидных решений — просто достать телефон и открыть там веб-сайт. Но если вы читаете этот пост, то, вероятно, по какой-то причине это не вариант для вас.
К счастью, существует множество других способов просмотра мобильной версии веб-сайта прямо из веб-браузера на настольном компьютере.
Таким образом, даже если у вас нет доступа к телефону, вы сможете легко увидеть мобильную версию веб-сайта, несмотря ни на что.
В этом посте мы поделимся четырьмя простыми способами предварительного просмотра мобильной версии веб-сайта:
- Первые два метода будут работать с любым типом веб-сайта, будь то ваш веб-сайт или чужой сайт, и независимо от того, создан ли он с помощью WordPress, Shopify, Wix, Squarespace или чего-либо еще.
- Последние два метода относятся к WordPress и показывают, как просматривать мобильную версию вашего сайта WordPress. Они будут работать только в том случае, если вы являетесь владельцем сайта.
Как просмотреть мобильную версию веб-сайта из браузера
Независимо от того, являетесь ли вы владельцем веб-сайта, есть два простых способа просмотреть мобильную версию любого веб-сайта в Интернете:
- Используйте инструменты разработчика вашего веб-браузера. Chrome отлично подходит для этого, но большинство других веб-браузеров предлагают аналогичные инструменты.
- Используйте специальный инструмент мобильного эмулятора. Все, что вам нужно сделать, это ввести URL-адрес, который вы хотите увидеть, и вы сможете просматривать его, как мобильный пользователь.
Давайте рассмотрим оба метода. Затем, позже, мы также покажем вам, как просмотреть мобильную версию веб-сайта, который вы создаете самостоятельно (на WordPress).
Используйте инструменты разработчика вашего веб-браузера
Большинство браузеров, таких как Google Chrome, Safari, Firefox, Microsoft и Brave, предлагают инструменты для разработчиков, которые позволяют изучить веб-сайт, в том числе посмотреть, как он выглядит на разных устройствах.
С помощью инструментов разработчика вы можете быстро увидеть, как веб-сайт выглядит на разных смартфонах, планшетах и т. д.
В этих примерах мы предполагаем, что вы используете Chrome (или любой браузер на основе Chromium, например Brave). Однако большинство других веб-браузеров предлагают аналогичные функции, хотя интерфейс будет другим.
Чтобы начать, щелкните правой кнопкой мыши интерфейс вашего веб-сайта и выберите Проверить из меню:
Это запускает инструменты разработчика и показывает модуль справа с элементами кодирования с этой страницы.
Вам не нужно беспокоиться о кодировании, так как основная цель — перейти на просмотр мобильной версии сайта. Найдите маленькую Переключить панель инструментов устройства (она выглядит как значок телефона и планшета) и нажмите ее, чтобы активировать мобильное представление.
Это автоматически отображает отзывчивое мобильное представление, где вы можете изменить размеры устройства в зависимости от того, какое устройство вы хотите эмулировать:
Чтобы сделать этот метод еще более привлекательным, это один из немногих вариантов со встроенными настройками устройства по умолчанию, обеспечивающий более точное представление о том, как ваш веб-сайт отображается на реальных устройствах.
Например, вы можете выбрать iPad Pro, и он мгновенно изменит размеры дисплея в соответствии с размерами iPad Pro.
Или вы можете выбрать Pixel 2 XL меньшего размера.
Или еще меньше Galaxy Fold. Протестируйте каждое из устройств в списке и убедитесь, что ваш сайт выглядит приемлемо на каждом из них.
Используйте онлайн-тестер или эмулятор
Эмуляторы
обычно используются для тестирования приложений в их родной среде, но многие из них доступны для проверки скорости отклика веб-сайта. Вы также можете найти в Интернете базовые тестеры, чтобы вставить свой URL-адрес и посмотреть, как он выглядит на небольших устройствах.
ResponsivePX.com — хороший вариант, но вы можете найти множество других с помощью быстрого онлайн-поиска.
Причина, по которой мы предлагаем людям попробовать эмуляторы и симуляторы, заключается в том, что они дают вам гораздо больший контроль над размерами сайта. И они часто проще, чем использование инструментов разработчика вашего браузера.
Возьмем, к примеру, ResponsivePX.com: вы заходите на сайт, вставляете URL-адрес и сразу же видите мобильную версию.
Позволяет настроить ширину, высоту и видимость полосы прокрутки. Вы даже можете поделиться результатами с людьми в вашей организации.
Как просмотреть мобильную версию вашего сайта WordPress
Если вы работаете над собственным сайтом WordPress, WordPress также предоставляет некоторые встроенные параметры, которые помогут вам увидеть, как ваш сайт будет выглядеть на мобильных устройствах.
Когда вы работаете в редакторе WordPress, вы можете быстро увидеть, как ваш контент будет выглядеть на разных устройствах. Вы также можете сделать то же самое во время настройки темы в настройщике WordPress.
Давайте пройдемся по этим методам…
Просмотр мобильной версии через предварительный просмотр страницы или редактора сообщений
Вы можете просматривать мобильную версию веб-сайта постранично. Например, вы можете захотеть посмотреть, выглядит ли ваша текущая запись в блоге презентабельно в мобильной версии. Также имеет смысл проверить домашнюю страницу на адаптивность к мобильным устройствам, особенно после изменения дизайна.
Начнем с домашней страницы. Вот как следующий веб-сайт выглядит с рабочего стола:
Вы можете просматривать отдельные страницы и публиковать сообщения с мобильных устройств, перейдя на страницу 9.0039 Сообщений или Страниц вкладок в панели управления WordPress.
Для ранее созданных сообщений и страниц перейдите на Все сообщения или Все страницы .
Начнем со страницы; точнее, Домашняя страница. Выберите нужную страницу.
Каждая страница и запись в бэкенде WordPress предлагает ссылку для предварительного просмотра в правом верхнем углу. Нажмите эту кнопку «Предварительный просмотр», чтобы открыть раскрывающееся меню со следующими параметрами:
.
- Рабочий стол
- Планшет
- Мобильный телефон
По умолчанию WordPress показывает версию для ПК.
Выберите представление для планшета или мобильного устройства, чтобы увидеть, как элементы вашего веб-сайта, такие как изображения, видео, меню и текстовые поля, преобразуются в меньший, более читабельный и кликабельный формат.
При тестировании вашего сайта в других представлениях убедитесь, что ссылки активны (не слишком малы), активы по-прежнему видны, и все выглядит четко, не заставляя пользователя увеличивать масштаб.
Найдите время, чтобы прокрутить страницу вниз, чтобы проверить все содержимое. Этот сайт, например, перечисляет несколько продуктов электронной коммерции на главной странице с изображениями, названиями продуктов и кнопками «Добавить в корзину».
Они выглядят прилично, но, возможно, мы хотели бы переключиться на две или три колонки продуктов, чтобы детали продукта были крупнее.
Сообщения ничем не отличаются при использовании этого метода. Они просто расположены в отдельном разделе WordPress (Сообщения → Все сообщения).
Учитывая, что они содержат сообщения вашего блога, а не статические веб-страницы, еще важнее проверить удобство для мобильных устройств. Почему? Потому что многие компании ежемесячно публикуют десятки сообщений в блогах с незначительными обновлениями страниц. Если блог является вашим основным источником контента, перед публикацией необходимо убедиться, что каждый из них готов для мобильных устройств.
Как обычно, перейдите в «Предварительный просмотр», затем нажмите «Планшет» или «Мобильный».
Вид рабочего стола иногда очень похож на вид планшета, поэтому убедитесь, что вы не увеличили масштаб в браузере.
Представление «Планшет» выглядит несколько меньше, чем представление «Рабочий стол», но с черным пространством вокруг содержимого сайта, что имитирует более реалистичный размер планшета.
Просмотр мобильной версии веб-сайта в настройщике WordPress
Настройщик WordPress не только предоставляет отличные способы редактирования вашей темы WordPress, но и имеет визуальный предварительный просмотр вашего сайта по мере внесения изменений.
К счастью, настройщик WordPress не ограничивает вас только предварительным просмотром на рабочем столе. Фактически, все ваши правки можно выполнить, глядя на экран мобильного телефона или планшета.
Чтобы это произошло, перейдите в Внешний вид → Настроить , чтобы запустить Настройщик.
По умолчанию Настройщик выглядит так. Он находится в стандартном представлении «Рабочий стол» с настройками для настройки слева и предварительным просмотром сайта справа.
Посмотрите в самый низ списка настроек, чтобы найти три значка кнопок: один для просмотра на рабочем столе, другой для просмотра на планшете и третий для просмотра на мобильном устройстве.
Нажмите кнопку «Просмотр планшета», чтобы увидеть, как ваши текущие изменения отображаются на интерфейсе размером с обычный планшет.
Кнопка Mobile View уменьшает этот интерфейс, приближая вас к стандартному размеру окна мобильного смартфона.
Примечание. Имейте в виду, что предварительные версии серверных мобильных устройств являются приблизительными. С таким количеством типов устройств в мире никто не увидит одно и то же.
Не забывайте о меню. Общеизвестно, что меню вызывают проблемы на мобильных устройствах.
Проверьте, провел ли разработчик темы значительное количество тестов. Вы заметите, что мобильное меню обычно помещается в скрытое меню-гамбургер (три горизонтальные линии) и что у вас может получиться два меню (например, как эта тема предоставляет кнопки электронной коммерции внизу экрана).
Как всегда, воздержитесь от беглого взгляда на первую страницу и предположения, что весь ваш сайт готов. Это рецепт того, как упустить мелкие недостатки, которые навредят вашему общему пользовательскому опыту.
Просмотрите весь веб-сайт в режиме просмотра планшета, включая все, от страниц продуктов до сообщений в блогах, от корзины покупок до страниц «О нас».
И выполните тот же процесс в мобильном представлении. Мы особенно рекомендуем протестировать функциональность электронной коммерции, поскольку последнее, что вам нужно, — это небольшой модуль оформления заказа или кнопка «Добавить в корзину».
Наверх
Легко просматривать мобильную версию сайта
В этой статье мы рассмотрели четыре метода просмотра мобильной версии веб-сайта, независимо от того, кому принадлежит веб-сайт или на какой технологии он создан.
Самый гибкий вариант — использовать инструменты разработчика вашего браузера. Это сработает несмотря ни на что. Пока вы можете открыть настольную версию веб-сайта, вы можете просмотреть мобильную версию с помощью инструментов разработчика.
Подход с эмулятором также работает с большинством веб-сайтов, хотя веб-сайт должен иметь общедоступный URL-адрес, чтобы эмулятор мог получить доступ к веб-сайту.
С другой стороны, если вы являетесь пользователем WordPress, вы можете положиться на встроенные инструменты адаптивного предварительного просмотра WordPress, чтобы выполнять работу, пока вы работаете над своим сайтом. Или другие методы также отлично работают для сайтов WordPress.
Если вам нужно мобильное представление для работы над собственным сайтом, вы также можете ознакомиться с нашим руководством по созданию веб-сайта, удобного для мобильных устройств, и получить несколько советов о том, на что следует обратить внимание при предварительном просмотре мобильной версии вашего сайта. .
Остались вопросы, как посмотреть мобильную версию сайта? Дайте нам знать об этом в комментариях!
Бесплатная направляющая
5 основных советов по ускорению
вашего сайта WordPress
Сократите время загрузки даже на 50-80%
просто следуя простым советам.
Как просмотреть мобильную версию вашего веб-сайта на настольном компьютере
В настоящее время чрезвычайно важно обеспечить, чтобы ваш веб-сайт и все его страницы хорошо выглядели на мобильных устройствах. Количество пользователей, просматривающих веб-сайты с мобильных устройств, растет с каждым днем, поэтому дизайн, удобный для мобильных устройств, входит в число самых важных факторов для Google . Поэтому, чтобы максимально использовать свою стратегию SEO, вы должны видеть, что мобильная версия вашего сайта WordPress выглядит просто идеально. Но чтобы все это стало возможным, вам нужно сначала найти способ просматривать мобильную версию вашего веб-сайта на компьютере.
К счастью, существует множество различных способов проверить, как выглядит ваш сайт при просмотре с мобильного устройства, и на этот раз мы перечислим их все. Некоторые из этих методов будут универсальными для любой платформы веб-сайта , но мы также включим способов сделать это, если у вас есть сайт на базе WordPress и вы хотите протестировать свои страницы во время работы на самом веб-сайте . Обязательно прочитайте, поскольку мы покажем вам следующие способы просмотра мобильной версии вашего веб-сайта:
Использование инструмента проверки элементов браузера
Использование онлайн-эмулятора
Использование предварительного просмотра страницы/сообщения WordPress
Использование настройщика WordPress
Темы Qode: Лучшие темы
View Collection
Bridge
Креативная многоцелевая тема WordPress
Stockholm
Действительно мультиконцептуальная тема
Startit
Fresh Startup Business Theme
9001 Просмотрите мобильную версию вашего браузера Elements
Чтобы просмотреть мобильную версию своего сайта, вы можете просто использовать инструменты разработчика, которые поставляются с вашим браузером.
Большинство известных браузеров (таких как Google Chrome, Safari, Firefox, Microsoft Edge и другие) предоставляют вам возможность увидеть, как ваш сайт выглядит на мобильных и других устройствах. Конечно, это также относится к планшетам, ноутбукам и т. д.
В нашем примере мы будем использовать Chrome и его инструмент Inspect Element. Однако следует учесть, что кроме небольшой разницы в интерфейсе возможности просмотра мобильной версии вашего сайта будут схожими.
Чтобы получить доступ к инструменту проверки вашего браузера, вам просто нужно щелкнуть правой кнопкой мыши свою страницу и нажать Проверить .
Откроется новый экран, показывающий различные элементы страницы. Теперь вам нужно найти кнопку «Переключить панель инструментов устройства» (значок в форме телефона/планшета) и нажать на нее.
Это покажет мобильное представление вашей страницы, т.е. покажет вашу страницу так, как она будет отображаться на мобильных и/или других устройствах.
Кроме того, в верхнем углу экрана вы сможете изменить размеры в соответствии с устройством, вид которого вы хотите проверить.
Например, если вы выберете iPhone 12 Pro, вы сможете увидеть точное изображение с телефона iPhone 12 Pro, поскольку оно будет скорректировано для имитации размеров этого устройства.
Точно так же вы можете просмотреть мобильную версию своего веб-сайта на Samsung Galaxy S8+, если вы нажмете на опцию с тем же названием:
Обязательно попробуйте все доступные опции в раскрывающемся списке, чтобы убедиться, что ваш сайт выглядит хорошо и отзывчиво на каждом мобильное устройство, независимо от его модели или размера.
Просмотр мобильной версии вашего веб-сайта с помощью онлайн-эмулятора
Существует множество онлайн-эмуляторов, которые можно использовать для проверки скорости отклика вашего веб-сайта. Обычно они работают, позволяя вам просто вставить URL-адрес вашей страницы, а затем проверить, как эта страница выглядит на конкретном мобильном устройстве.
Мы рекомендуем использовать такие инструменты, как инструмент тестирования экрана Screenfly от Bluetree или, например, responsivepx. Конечно, в Интернете есть множество других подобных инструментов, которые вы можете легко найти, просто выполнив поиск в Google. Но для целей этой статьи мы решили показать вам, как это сделать с помощью инструмента адаптивного тестирования Screenfly.
Как только вы зайдете на домашнюю страницу Screenfly, вы можете просто ввести URL-адрес страницы в строке поиска, а затем нажать кнопку Перейти .
Ниже вы увидите различные варианты, которые вы можете выбрать, чтобы увидеть, как ваша страница выглядит на разных мобильных устройствах и планшетах. Сюда входят iPhone, iPad, Chromebook, некоторые популярные модели Samsung Galaxy и многие другие.
Например, вот как выглядит наша страница, когда мы выбираем Samsung Galaxy S7:
Просмотр мобильной версии вашего веб-сайта с помощью предварительного просмотра страницы/записи WordPress
Если у вас есть сайт WordPress и вы хотите увидеть, как он выглядит на мобильных устройствах с самого сайта WordPress, вы будете рады услышать, что это это довольно легко сделать.
А именно, WordPress поставляется с некоторыми встроенными опциями, которые позволят вам видеть мобильную версию вашего сайта при редактировании страниц и сообщений.
Во-первых, вам нужно перейти на страницу Страницы >> Все страницы (или Сообщения >> Все сообщения) экран , а затем нажмите кнопку Редактировать под соответствующей страницей/публикацией.
Как только вы окажетесь на экране редактирования своей страницы (или сообщения), вы сможете увидеть и использовать ссылку Preview (она будет доступна в правом верхнем углу вашей страницы). Нажмите на эту ссылку, и вы увидите новое раскрывающееся меню с параметрами предварительного просмотра того, как страница будет выглядеть на рабочем столе, ноутбуке и мобильном телефоне. В предварительном просмотре по умолчанию будет отображаться страница рабочего стола, поэтому вам следует нажать на Mobile , чтобы увидеть, как ваша страница будет выглядеть на мобильных устройствах.
Мы рекомендуем вам проверить мобильное представление каждой страницы (и публикации) вашего сайта по отдельности. Это включает в себя вашу домашнюю страницу, страницу «О нас», страницу блога и этот список можно продолжить. Затем вам необходимо убедиться, что все элементы страницы (такие как меню, ссылки, изображения, видео и т. д.) правильно отображаются и выглядят аккуратно и чисто. Вы также должны проверить, все ли ваши ссылки работают, весь ли текст страницы легко читается, а также все ли остальные элементы страницы доступны и видны в целом.
Наконец, мы также советуем вам проверить, как различные элементы вашей страницы выглядят на планшете, нажав на предварительный просмотр Tablet .
Просмотр мобильной версии вашего веб-сайта с помощью настройщика WordPress
Еще один отличный способ проверить, как выглядят ваши страницы на мобильных устройствах, — это экран WordPress Customizer . Использование этого экрана весьма практично, так как позволяет мгновенно просматривать в реальном времени каждый элемент в течение всего процесса редактирования.
И, конечно же, вы можете выполнять редактирование страницы, предварительно просматривая, как она выглядит на мобильном устройстве.
Для этого просто откройте Внешний вид >> Настройка .
Вы увидите, что настройщик по умолчанию показывает предварительный просмотр рабочего стола.
Вы можете легко изменить это, выбрав значок мобильного телефона, расположенный в нижнем левом углу экрана:
Это сделает весь интерфейс вашей страницы более узким, имитируя размер мобильной страницы. Однако вы должны отметить, что это всего лишь приблизительная симуляция мобильной страницы, поскольку существует множество разных мобильных телефонов с разными размерами экрана.
Еще раз, не забудьте проверить, как ваше мобильное меню, изображения, ссылки и другие элементы выглядят в мобильной версии.
Подведение итогов
Тестирование отклика вашего веб-сайта на нескольких устройствах необходимо для того, чтобы убедиться, что он удобен как для пользователей, так и для поисковых систем, и проверка мобильной версии вашего сайта не является исключением.