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

Ручная проверка отображения сайтов в популярных браузерах и устройствах (для новичков)

Проверить мобильную версию сайта можно в браузере 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». С помощью него можно определить насколько по версии хрома мобильным устройствам удобно использовать ваш сайт, о нем подробней в этой статье.

Как посмотреть мобильную версию сайта через компьютер

Как посмотреть мобильную версию сайта через компьютер?

Сразу возникает вопрос, а в чём же сложность? В отличие от адаптивного дизайна, мобильный шаблон — это отдельный набор файлов и стилей, который доступен только пользователям мобильных устройств. Такая избирательность реализуется путём определения соответствия параметра «user-agent».

То есть, прежде чем загрузить какую-либо веб-страницу, сайт сверяется с параметрами пользовательского браузера, уже исходя из этого выдаёт один или другой вариант. Например, сайт получает user-agent — “firefox”, значит отрабатывается загрузка десктопной (полной)версии сайта. Если же user-agent — “Android”, то сайт понимает, что требуется открыть мобильную версию сайта.

Через браузер Firefox

Чтобы посмотреть сайт как мобильный пользователь из браузера Mozilla Firefox, следует обратиться к встроенным инструментам веб-разработки. Для этого открываем сайт и в панели меню (сверху / можно вызвать клавишей «Alt») переходим по пути:
Инструменты ? Веб-разработка ? Адаптивный дизайн

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

Через браузер Chrome

Если вы активный пользователь браузера Google Chrome, то предварительно устанавливаем расширение с говорящим названием «». А далее обращаемся к новому элементу в панели сверху (слева от «меню параметров») — смайлик в очках.

Щелчком мыши разворачиваем список доступных агентов. Выбираем одну из популярных мобильных ОС Android или iOS, и сайт преобразовывается на глазах. По окончании работы с мобильной версией сайта не забудьте перейти обратно на агент «Chrome / default».

Шаг 1. Проверьте, как выглядит сайт с мобильного устройства

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

1. Перейдите в редактор сайта:
2. Кликните на три белых точки в фиолетовом круге:
3. В меню слева кликните на иконку телефона:
   Так страница выглядит с мобильного устройства:
   Видно, что большая часть блоков адаптирована под текущую версию. Однако некоторые элементы выглядят некорректно. Например, блок со сроком акции:
   Давайте отредактируем их.

Как запускать на компьютере мобильные версии сайтов (и зачем это может понадобиться)

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

Откройте на компьютере браузер Google Chrome, перейдите в Chrome Web Store, найдите расширение User-Agent Switcher и установите его. На адресной панели Chrome появится кнопка этого расширения, которая выглядит как глобус. Нажмите на неё и в выпадающем меню выберите новый User-Agent — Android > Samsung Galaxy S3 или iOS > iPhone. Активная вкладка перезагрузится и перед вами будет мобильная версия сайта. Имейте в виду, что User-Agent будет меняться для всех сайтов, а не только для той вкладки, что была открыта.

В настройках расширения User-Agent Switcher можно удалить лишние устройства, а также указать, чтобы браузер запоминал последний использованный User-Agent. Кроме того, вы можете добавить свой собственный User-Agent в том случае, если вам нужно увидеть, как выглядит мобильный сайт на каком-то определённом устройстве. Узнать код User-Agent используемого вами браузера можно на сайте whoishostingthis.com.

Для отключения подменного User-Agent нужно ещё раз нажать на кнопку расширения и выбрать Default. В этом случае браузер будет передавать сайтам свои собственные данные, не притворяясь приложением, установленным на другое устройство.

В каких случаях вам могут понадобиться мобильные версии сайтов на десктопном компьютере? Например, в тех, когда важно расходовать меньше трафика. Кроме того, мобильные сайты, как правило, работают быстрее и у них менее перегруженный интерфейс, близкий к мобильным приложениям. Веб-мастера используют подмену User-Agent для того, чтобы посмотреть, как их сайты выглядят на разных платформах и на экранах с разными соотношениями сторон. Для этого им не нужно покупать отдельные устройства, достаточно просто открыть сайт в Chrome и с помощью расширения выбрать нужный гаджет. Ещё одна немаловажная деталь: некоторые мобильные сайты предлагают дополнительную функциональность, недоступную на их десктопных версиях. Например, в скором времени Instagram позволит загружать фотографии через мобильный сайт, а подменив User Ager, вы сможете делиться снимками прямо с компьютера, предварительно обработав их в графическом редакторе.

Вместо послесловия

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

Если планируете работать с CMS, то обратите внимание на WordPress и Shop-Script. Вторую корректнее называть полноценной платформой, одной из составных частей которой является CMS. WordPress отлично подойдет для информационных сайтов, блогов и небольших интернет-магазинов, а Shop-Script – для нагруженных сайтов и крупных магазинов.

Обе платформы отличает удобная и продуманная панель администратора, огромное количество расширений и интеграций, а также встроенная поддержка мобильной версии. Если используете другие CMS (например, Joomla или Drupal), то понадобится использовать адаптивные темы при создании сайта или устанавливать специальные мобильные расширения.

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

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

Итак, для создания мобильной версии сайта вам нужно ввести URL-адрес своего действующего сайта. Платформа проанализирует ресурс, после чего переведет вас в редактор. В нем вы увидите опции для преобразования сайта и окно предпросмотра в виде мобильного устройства. Доступно 3 категории опций:

Из прочих подобных конструкторов можем отметить Mobirise, но для его использования нужно устанавливать программу на ПК.

1. Дизайн

Здесь вы настраиваете внешний вид сайта, например:

• Layout (макет). Структура страницы для подачи материалов. Доступно несколько вариантов – например, списком, матрицей и пр. Также можете выбрать стиль для меню.
• Style (стиль). Здесь выбираете цветовую схему для элементов, фона и шрифтовые схемы для кнопок, заголовков и пр.
• Header (хедер). В этом разделе выбираете тип шапки, размер и выравнивание и так далее.

2. Страницы

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

Яндекс.Вебмастер (1 из 5 баллов)

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

– Показывает, как отображается только верхня часть(область без прокрутки страницы);

– Проверка мобильной версии сайта только с одним разрешением, по ширине 320px(5% от всех мобильных устройств на начало 2020 г.);

– Необходимо проходить регистрацию и подтверждать права на сайт;

– Показывает хоть что-то, а это лучше, чем ничего.

Браузер blisk (5 из 5 баллов)

Браузер blisk — самый функциональный и удобный способ, как открыть и посмотреть мобильную версию сайта на компьютере при любом разрешении экрана. Blisk создан для разработчиков веб приложений и сайтов, основным отличием от проверки в обычном браузере является: более удобный интерфейс и возможность одновременного просмотра «десктоп» и «мобильной» версий в одном окне.

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

Плюсы/минусы проверки в браузере blisk

– Быстрая установка без регистрации;

– Доступны все устройства с наиболее популярными разрешениями экранов;

– Самый функциональный и удобный способ;

– Проверить мобильную версию сайта можно при любом разрешении экрана;

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

– Бесплатная проверка мобильной версии сайта ограничена 30 мин. в день, далее доступен только платный тариф.

При проверке сайта не забудьте отключить кэширование(поставить «Cache» в позицию «off» сверху слева в панели Toolbox), иначе даже после изменений, может отображаться старая версия сайта.

Разрешения экрана мобильных устройств для проверки в браузере blisk

Чтобы убедиться, что на большинстве мобильных устройств сайт отображается корректно, важно знать не только, как открыть и проверить мобильную версию сайта на компьютере, но и при каких разрешениях смотреть. Рекомендую прощелкать в меню значки устройств, имеющих следующие размеры ширины экрана: 320px, 360px, 375px, 393px, 412px, 414px, 1024px(планшет), 1280px(планшет). Данные значения ширины экрана являлись наиболее популярными на начало 2020 г., более подробная статистика выше.

Ручной метод

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

1. Разработка с нуля

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

Отредактируйте неадаптивные элементы

Настроить сайт под мобильную версию можно через Visual Builder, через CSS и через настройки видимости. Рассмотрим, как это сделать.

Через Visual Builder

1. Перейдите в настройки модуля:
2. В открывшемся блоке нажмите на иконкутелефона:
   Обратите внимание: все описанные ниже настройки можно выставить и для планшетной версии сайта. Для этого в панели вместе вместо иконки телефона выбирайте иконку планшета:
3. Отредактируйте элементы так, чтобы в мобильной модификации сайта они выглядели гармонично. Обратите внимание: все изменения отображаются в Visual Builder до сохранения — вы сможете посмотреть их в процессе редактирования. Например, измените размер, позиционирование или цвет шрифта:
   Или добавьте в модуль или ряд новые элементы. Чтобы сохранить изменения, нажмите на белую галочку. Аналогичным образом настройте все модули, которые отображаются некорректно.

После этого, чтобы не потерять изменения на всей странице, кликните Сохранить:

Через CSS

Адаптивное редактирование Divi позволяет вносить более сложные изменения в дизайн страницы с помощью CSS. Чтобы использовать для настройки CSS:

1. Перейдите в настройки модуля:
2. Перейдите на вкладку Дополнительно — Пользовательский CSS. Количество доступных настраиваемых полей CSS будет отличаться в зависимости от элемента. Например, для текстового модуля есть только три настраиваемых поля: «Перед», «Основной элемент» и «После».
3. Каждое поле ввода CSS соответствует классу CSS внутри элемента. Чтобы увидеть соотношение, наведите указатель мыши на элемент и кликните на иконку вопроса:
4. Чтобы внести изменения, для каждого поля нажмите на иконкутелефона. Также настройки можно выставить и для планшетной версии сайта: в панели перейдите на вкладку с иконкой планшета. Обратите внимание: код, который применяется для планшетной версии, по умолчанию распространяется и на мобильную версию.
5. Введите в поле ввода нужный код. Обратите внимание: не нужно добавлять класс CSS к фрагменту CSS, иначе код не сработает. Добавьте только свойства CSS в поле соответствующего класса. Предположим, вы хотите, чтобы кнопка охватывала всю ширину модуля на планшете и телефоне, но не на рабочем столе. Для этого на вкладке в поле ввода добавьте «display: block;»:

В Mozilla Firefox

Посмотреть мобильную версию сайта с компьютера в Mozilla можно аналогично кликнув в любую точку сайта правой клавишей мыши и в меню выбрав «Исследовать элемент».

Далее в нижнем-правом углу потребуется выбрать вид «Мобильный телефон».

При необходимости нажав на «Адаптивный» можно выбрать нужную модель смартфона.

Справа можно настроить разрешение экрана (настраивается вручную).

Далее идет возможность изменить ориентацию экрана.

После можно изменить DPR (Соотношение пикселей устройства к снимку экрана).

Как и в Google Chrome можно изменить способ подключения на 2G, 3G, GPS, 4G или

Также при необходимости можно включить имитацию устройства (требует перезагрузки браузера).

Как создать мобильную версию сайта

Если вы решили создавать мобильную версию сайта, то вам доступно 3 основных способа:

• Самостоятельная разработка (написание исходного кода).
• Использование CMS.
• Конструкторы сайтов.

Adaptivator (2,5 из 5 баллов)

Adaptivator позволяется посмотреть мобильную версию сайта online, но среди доступных размеров ширины экрана мобильных версий нет 67% наиболее популярных разрешений, а некоторые имеющиеся размеры дублируются. Сервис получает низкую оценку, потому что непонятно, как посмотреть мобильную версию сайта на компьютере у большинства устройств.

– Нельзя посмотреть, как выглядит сайт у 67% мобильных пользователей. Отсутствует проверка мобильной версии сайта при следующих размерах ширины: 57% пользователей используют 360px(виртуальные пиксели DPR), 6% – 412px и 4% – 393px. Данные статистики на начало 2020 г.

– Показывает, как выглядит сайт на 12 разрешениях мобильных устройств.

– Показывает весь сайт целиком;

– Есть ширина экрана 320px, 375px. Если на этих размерах сайт отображается корректно, то, скорее всего, будет нормально отображается и при самой популярной ширине — 360px.

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

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

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

Responsinator (2 из 5 баллов)

responsinator.com — бесплатный сервис, который позволяет проверить мобильную версию сайта на нескольких разрешениях, но на нем нет 65% наиболее популярных размеров ширины экрана, поэтому низкая оценка. Вопрос: «как проверить мобильную версию сайта на компьютере при минимальной и еще используемой ширине 320px?» — остается неотвеченным. Ширина экрана 320 px является важным субъективным критерием т.к. если сайт открывается при 320 px, то, скорее всего, при остальных размерах мобильной версии тоже должен корректно отображаться.

– нельзя посмотреть, как выглядит сайт у 65% мобильных пользователей. Минимальный размер разрешения мобильной версии начинается с 374px. Но 57% мобильных устройств имеет ширину экрана 360px(виртуальные пиксели DPR), 5% – 320px и 4% – 393px. Статистика по разрешениям на начало 2020 г.

– Показывает сразу, как выглядит сайт на 10 разных разрешениях мобильных устройств;

– Показывает весь сайт целиком.

Как посмотреть ПК / десктопную версию сайта на мобильном телефоне

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

Представим жизненную ситуацию: исполнитель, программист или любой другой подрядчик отправил вам ссылку на просмотр готовой или промежуточной версии сайта, а вы находитесь в дороге и в руках у вас только мобильный телефон, через который удается открыть в браузере только мобильную версию сайта. А вам же нужно оценить ещё и отображение ПК (десктопной) версии. Как быть? Рассказываю!

2. Отдельный шаблон

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

Если ваш сайт создан на какой-нибудь популярной CMS (например, WordPress), то будет достаточно установить соответствующий плагин для адаптации сайта – WPTouch, WP Mobile Detector или подобный. При этом сможете выбрать, какие блоки будут отображаться в мобильной версии сайта.

• Максимально быстрый и простой способ создания мобильной версии (если вы используете плагин)
• Упрощение и «облегчение» сайта (если вы создаете отдельный шаблон)

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

Обычный браузер: Яндекс.Браузер, Google Chrome, Opera, Mozila Firefox (5 из 5 баллов)

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

Плюсы/минусы проверки в браузере на компьютере

– Самый универсальный и правдоподобный способ, т.к. тест в реальном браузере;

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

– Не получится посмотреть небольшое количество сайтов(по личным оценкам менее 1%), у которых разработчики сделали недоступным просмотр мобильной версии на компьютере даже при изменении размера окна. Но если в браузере мобильная версия сайта отображается нормально, то 99,9%, что страница также будет открываться и на мобильных устройствах.

Как проверить мобильную версию сайта на компьютере в браузере

Чтобы открыть мобильную версию сайта на компьютере необходимо 2 шага:

1 Шаг. Включить «Инструменты разработчика»

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

В Яндекс.Браузер зажмите Ctrl+Shift+I или кликните: три вертикальные полоски —> «Дополнительно» —> «Дополнительные инструменты» —> «Инструменты разработчика».

Как включить «Инструменты разработчика» на примере Яндекс браузера

В Google Chrome нажмите Ctrl+Shift+I или зайдите: три вертикальные точки —> «Доп. инструменты» —> «Инструменты разработчика».

В Mozila Firefox зажмите Ctrl+Shift+I или перейдите: три вертикальные полоски —> «Веб разработка» —> «Инструменты разработчика».

В Opera нажмите Ctrl+Shift+I или кликните: «Меню» —> «Разработка» —> «Инструменты разработчика».

2 Шаг. Включить «Режим адаптивного дизайна(toggle device toolbar)»

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

Как включить «Режим адаптивного дизайна»

В Яндекс.Браузер, Google Chrome, Opera после выполнения 1 шага зажмите (Ctrl+Shift+M) или кликните на значок Toggle device toolbar(изображен планшет с телефоном). Появится поле для изменения разрешения и меню популярных смартфонов.

Как включить «Режим адаптивного дизайна» на примере Яндекс браузера

В Mozila Firefox после выполнения 1 шага нажмите (Ctrl+Shift+M) или кликните на значок: три вертикальные полоски —> «Веб разработка» —> «Адаптивный дизайн». Далее, появится выбор разрешения и меню популярных телефонов.

3 Шаг проверка на наиболее популярных размерах экрана

Проверьте, как выглядит сайт при всех наиболее популярных размерах ширины экрана у мобильной версии: 320px, 360px, 375px, 393px, 412px, 414px, 1024px, 1280px.

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

В Google Chrome

Для того, чтобы открыть мобильную версию сайта с компьютера потребуется открыть Google Chrome и перейти на нужный URL после чего кликнуть правой клавиши мыши в любом месте экрана и в выпавшем меню выбрать пункт «Посмотреть код».

В правом-верхнем углу кликаем на значок «Мобильный телефон».

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

Также доступно изменение масштаба.

Дополнительно можно выбрать способ отображения (online/offline).

При необходимости стоит изменить ориентацию экрана на альбомную или стандартную.

Адаптация сайта под мобильные устройства

Существует 3 основных способа адаптации сайтов под мобильные устройства:

• Адаптивная верстка
• Отдельный шаблон для мобильных устройств на основном домене
• Мобильная версия сайта на поддомене

Рассмотрим каждый из них, а также плюсы и минусы.

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

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

3. Мобильный сайт на поддомене

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

Суть заключается в следующем: вы создаете поддомен с тем же движком, что и основной сайт, и используете одну базу данных – если пользователь посетит сайт с мобильного устройства, он будет перенаправлен на поддомен. Для пользователей WordPress уже предусмотрены плагины, создающие мобильную версию сайта на поддомене (например, WP Mobile Edition).

Яркий пример реализации такого способа – Вконтакте. Если обычная версия сайта располагается по адресу «vk.com», то мобильная версия – на поддомене «m.vk.com». Обычно в качестве поддомена используют «m», «mobile», «pda» и пр.

Главный плюс способа – увеличение скорости сайта для мобильных устройств (вы можете сильно «облегчить» сайт). Но при этом вам придется создавать и настраивать поддомен, писать шаблоны и скрипты. А это занимает много времени.

Какой должна быть мобильная версия сайта

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

• Визуально выделяйте самые важные кнопки (например, кнопку заказа/покупки), располагая их на главном экране
• Сделайте номера телефонов кликабельными
• Горизонтальная прокрутка должна отсутствовать
• Старайтесь по минимуму использовать виджеты (онлайн-консультант, коллбек и пр.). Также старайтесь избегать баннеров, всплывающих окон и других рекламных блоков, которые будут заполнять весь экран
• Расположите на видном месте кнопку для перехода на десктопную версию сайта

Временное решение проблемы

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

Достаточно в вашем браузере открыть основное меню – обычно это три точки или три полоски в правом верхнем (в Сhrome, Mozilla firefox) или нижнем (Яндекс.браузер) углу экрана – и выбрать один из пунктов под названием “версия для ПК”. Возможно точное название будет немного отличаться в разных браузерах, но путь будет именно таким.

Готово – открытый сайт моментально перестроится на обычную пк-версию. Вернуть обратно мобильную версию можно таким же путем – убрав галочку из меню браузера возле “Версия для ПК”.

Варианты создания мобильного сайта?

Существует, на сколько мне известно, три направления. Разберем каждую технологию по отдельности, с какими плюсами и минусами мы можем столкнуться?!

Отдельная версия сайта — Это своего рода отдельный облегченный сайт, созданный специально для просмотра на мобильных устройствах или с низкой скоростью интернета. Обычно такую версию используют на поддоменах, например — основной сайт https://savme.ru, а мобильный http://wap.savme.ru или http://mobile.savme.ru. В данном случае используется перенаправление.

• Два независимых сайта — возможность менять контент, не затрагивая при этом другой сайт;
• Скорость загрузки — так как мобильная версия независима от основной, сделать ее легкой и быстрой не составит труда;
• Удобство – навигацию и контент проще заточить, вплоть до мелочей, так как сайт полностью рассчитан под мобильную аудиторию.

• Дублирование контента — так как один и тот же контент будет и в основной версии и в мобильной. Возможно спасет мета-тег rel=canonical, но есть масса и других проблемм.
• Срез функционала — как не крути но такой сайт будет урезанной копией основного сайта, отсюда совсем другие показатели статистики. Да и основная масса посетителей не любит различного рода ограничений и всегда переходит на основной сайт…
• Перенаправления — как известно, различного рода редиректы негативно сказываются в сфере SEO.

Технология RESS — Тут используется вычисление на стороне сервера, смотря с какого устройства был заход — создается тот или иной макет (html и css). Называется это чудо — адаптивный веб-дизайн + специальное программное обеспечение на стороне сервера (RESS — Responsive Web Design и Server Side Components).

• Скорость загрузки — возможность удаления разных ненужных скриптов, стилей;
• Меньший вес страницы – вместо того чтобы скрывать элементы как в адаптивной верстке их можно просто удалить;
• Навигация — возможность настроить структуру под определенные устройства.

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

Адаптивная верстка (веб-дизайн) — Эта верстка сайта подстраивается под любое разрешение экрана путем его определения с помощью CSS3 Media Queries. Как правило используется один и тот же ресурс, который содержит в себе различные варианты для отображения на смартфонах, планшетах и компьютерах…

• Сохранность — не зависимо от устройства используется один и тот же контент и набор html кодов;
• Единый URL — для различных макетов используются одни и те же адреса и контент, нет дублей.

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

Способ 1

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

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

Адаптивный дизайн

Адаптивный дизайн актуален для визиток, информационных сайтов, небольших интернет-магазинов, блогов и пр. Для адаптации дизайна существующего сайта вам понадобится какой-нибудь CSS-фреймворк (например, Bootstrap) или CSS3 Media Queries.

Например, если вы решили воспользоваться Bootstrap, вы прописываете view-port, подключаете файлы фреймворка и добавляете в разметку классы сетки Bootstrap.

Главным преимуществом этого способа является быстрая реализация. Но если в десктопной версии есть используемые скрипты (но они не будут использоваться в мобильной) – они все равно будут подгружаться, что увеличивает время загрузки.

Делаем адаптивную верстку самостоятельно

Для своего блога я выбрал адаптивную верстку по нескольким причинам:

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

Теперь расскажу Вам о том, что нужно сделать, чтобы Ваш ресурс подстраивался под любые разрешения и понравился Google

Во первых нужно прописать мета-тег в :

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

Так же, если мы добавим еще и maximum-scale=1.0, user-scalable=no — то этим, мы запретим масштабирование, но я не рекомендую этого делать, пусть человек сам решает, может у него проблемы со зрением…

Вот, начало положено, теперь если мы зайдем через смартфон или еще что, то увидим как выглядит наш сайт! Печалька да?!

Это дело нужно будет исправлять с помощью Media Queries в файле стилей CSS, выглядит параметр так:

@media screen and (min-width:240px) and (max-width:720px) <
тут теги и атрибуты
>

То есть, эти стили будут применяться браузером от минимальной ширины 240px до максимальной 720px устройства! Если больше или меньше этих значений, то будут применены основные стили сайта. Все просто!

И вот таким макаром мы прописываем стили под разные разрешения устройств. Например:

• смартфоны вертикально — от 240 до 340, от 341 до 420;
• смартфоны горизонтально и некоторые планшеты вертикально — от 421 до 540, от 541 до 670;
• планшеты вертикально — от 671 до 800;
• планшеты горизонтально — от 801 до 1024

Если нужно показать какой-либо элемент: display:block, если же спрятать: display:none;

Чтобы узнать как выглядит сайт или блог на различных устройствах есть замечательные сервисы:

• http://quirktools.com
• http://www.emulateurmobile.com/
• http://webmark.com.ua

Кстати, если Вам нужно сделать сайт адаптивным, но Вы уверены что сами не справитесь, да и желания особого нет, то я предлагаю свои услуги! Посмотреть мои работы и отправить заявку, можно на странице: услуги.

На клиентском сайте записал пример работы адаптивной верстки, если так и не поняли принцип ее работы обязательно смотрим.

Конструкторы

Наконец, самый простой способ – конструкторы сайтов. Если у вас небольшой проект и нужен базовый функционал, то нет смысла тратить время и деньги на разработку мобильной версии сайта. Используя конструктор, получите и обычный сайт, и мобильный – все благодаря адаптивному дизайну шаблонов.

Для создания сайта подойдет практически любой современный конструктор – например, InSales, Wix, Nethouse и др. Можете разрабатывать страницу с чистого листа или на основе какого-нибудь шаблона. Обычно конструктор предлагает несколько десятков или сотен вариантов для разных направлений. Понадобится всего лишь добавлять, удалять или изменять блоки и элементы страницы, а также размещать свой контент (текст, изображения, видео и пр.). При перетаскивании блоков (Drag’n’Drop-редактор) сразу же увидите результат. На странице можно размещать практически все существующие элементы структуры – кнопки, галереи, формы, видео и прочее.

Дизайн и оформление при грамотном использовании конструктора не будет уступать профессиональным сайтам. Освоить такую платформу можно в течение нескольких часов. К сожалению, возможности любого конструктора ограничены заложенными функциями. В редких случаях пользователю открывают доступ к редактору кода, благодаря чему он сможет вносить любые изменения (если умеет). Также возможности можно расширить за счет интеграций – например, с CRM-системами, сервисами коммуникации с клинтами (онлайн-консультант, обратный звонок и др.), статистики и аналитики и так далее.

В помощь заказчикам. Ответы на часто задаваемые вопросы (часть 2)

В предыдущей статье «В помощь заказчикам. Ответы на часто задаваемые вопросы (часть 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. Судя по иконке той программы, которую Вы запускаете для доступа к интернету, а также подписи под ней Вы можете узнать, какой у Вас браузер. Иконки браузеров на компьютере совпадают с иконками этих же браузеров на мобильных устройствах.

На рисунке ниже приведены иконки популярных браузеров. Слева направо:

1. Google Chrome. Или просто
2. Microsoft Edge. Или просто Edge.
3. Mozilla Firefox. Или просто Firefox.
4. Opera.
5. Яндекс.Браузер.

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

Как узнать, какой у меня браузер

Ниже показан пример иконки браузера 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

Рекомендую скачивать браузеры только с официальных сайтов их разработчиков:

Как узнать разрешение экрана на 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 Диске нажмите на файл или папку правой кнопкой мыши и выберите Открыть доступ».

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

Примерно с 2008 года и по сегодняшний день создаю сайты «под ключ» на Joomla и WebSite X5. Также занимаюсь их доработкой, SEO-продвижением, контекстной рекламой, защитой от взлома и оптимизацией скорости загрузки сайта.

Кандидат технических наук по специальности «Информационные технологии».

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

Посмотреть мобильную версию сайта: 6 способов, как открыть и проверить мобильную версию сайта на компьютере

Как посмотреть мобильную версию сайта через компьютер

Admin 10.03.2018 — 18:48 2 42373+

размер текста

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

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

Как посмотреть мобильную версию сайта через компьютер?

Сразу возникает вопрос, а в чём же сложность? В отличие от адаптивного дизайна, мобильный шаблон — это отдельный набор файлов и стилей, который доступен только пользователям мобильных устройств. Такая избирательность реализуется путём определения соответствия параметра «user-agent».

То есть, прежде чем загрузить какую-либо веб-страницу, сайт сверяется с параметрами пользовательского браузера, уже исходя из этого выдаёт один или другой вариант. Например, сайт получает user-agent — “firefox”, значит отрабатывается загрузка десктопной (полной)версии сайта. Если же user-agent — “Android”, то сайт понимает, что требуется открыть мобильную версию сайта.

Через браузер Firefox

Чтобы посмотреть сайт как мобильный пользователь из браузера Mozilla Firefox, следует обратиться к встроенным инструментам веб-разработки. Для этого открываем сайт и в панели меню (сверху / можно вызвать клавишей «Alt») переходим по пути:
Инструменты ? Веб-разработка ? Адаптивный дизайн

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

Через браузер Chrome

Если вы активный пользователь браузера Google Chrome, то предварительно устанавливаем расширение с говорящим названием «User-Agent Switcher for Chrome». А далее обращаемся к новому элементу в панели сверху (слева от «меню параметров») — смайлик в очках.

Щелчком мыши разворачиваем список доступных агентов. Выбираем одну из популярных мобильных ОС Android или iOS, и сайт преобразовывается на глазах. По окончании работы с мобильной версией сайта не забудьте перейти обратно на агент «Chrome / default».

Вместо послесловия

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

поделитесь с друзьями:

Как зайти в мобильную версию ВКонтакте

Мобильная версия ВК — это сайт, которым можно пользоваться через браузер телефона или планшета. Он специально предназначен для мобильных устройств с небольшими экранами. Это НЕ мобильное приложение, но выглядит похоже. Как войти на него?

Если тебе нужно мобильное приложение ВК (отдельная программа на телефон), это здесь: Как скачать и установить приложение ВКонтакте на телефон.

Нужно иметь браузер на своем телефоне или планшете — это программа для просмотра сайтов. Обычно она уже установлена и называется просто «Браузер». Популярные бесплатные браузеры — Хром, Файрфокс, Сафари, Опера. Рекомендуем Хром, с ним меньше всего проблем. Для самых старых телефонов есть Опера Мини.

В любом браузере есть адресная строка. В нее вводится адрес сайта, который ты хочешь открыть. Чтобы открыть мобильную версию ВК, нужно нажать на эту строку и ввести адрес m.vk.com или просто нажать на эту ссылку:

Чтобы войти на свою страницу ВК, потребуется авторизоваться, то есть ввести свои логин и пароль. Они вводятся в поля Телефон или email и Пароль. После ввода нужно нажать Войти.

Так выглядит вход в мобильную веб-версию сайта ВК в браузере на телефоне

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

Внимание! Не нажимай Зарегистрироваться

Если забыл пароль, придется восстановить доступ одним из стандартных способов:

• Восстановление доступа ВКонтакте по СМС
• Восстановление доступа ВКонтакте, если нет привязанного номера телефона

Зачем нужна мобильная версия ВК?

• Если возникли какие-то проблемы с мобильным приложением, можно зайти в мобильную версию сайта. Это позволит сделать то, что хотел, а разбираться с проблемами можно будет потом.
• Часто в мобильном приложении бывают проблемы с восстановлением доступа или разблокировкой страницы. В этом случае, если доступа к компьютеру нет, рекомендуется попробовать сделать то же самое через мобильную версию сайта. В идеале лучше делать это через полную версию, войти в которую можно и с телефона, но будет мелко и неудобно. Для полной версии лучше все-таки найти компьютер, ноутбук, планшет.
• Мобильная версия сайта хорошо работает на старых телефонах, на которые нельзя установить последнюю версию приложения или она глючит. См. также ВК не поддерживается на вашем устройстве. Что делать?
• Мобильная версия позволяет пользоваться ВК на телефонах, для которых вообще нет приложения ВК или оно уже не поддерживается (Виндоус Фон, Симбиан).
• Мобильная версия напоминает более старую версию мобильного приложения, где еще не было клипов и многих ненужных вещей, которые мешают. Но при этом в мобильной версии работает большинство функций ВК, она достаточно часто обновляется и в ней даже есть темная тема оформления.

Как сделать иконку мобильной версии ВК на телефоне?

В браузере Хром, открыв m.vk.com, вызови меню кнопкой ⋮ (три точки) и выбери Добавить на главный экран. У тебя появится новая иконка (кнопка) в телефоне на рабочем столе, которая сразу будет открывать мобильную версию ВК на весь экран, как обычное приложение. Это называется «веб-приложение».

Иконка, открывающая мобильную версию ВК, как будто это отдельное приложение

Как сделать, чтобы по ссылке открывалась мобильная версия ВК, а не полная?

В начале ссылки перед vk.com нужно добавить букву m и точку.

Пример

Было https://vk.com/vhod_ru
Стало https://m.vk.com/vhod_ru

Этим же способом можно исправить адрес в адресной строке браузера, чтобы открыть мобильную версию той страницы, на которой ты находишься. Надо нажать на адресную строку, добавить букву m и точку перед vk.com, а затем нажать Enter на клавиатуре (или кнопку Перейти, Открыть на экране).

Что делать, если в мобильной версии сайта что-то не работает?

1. Установи на телефон другой браузер и зайди в мобильную версию сайта в нем.
2. Попробуй очистить все временные данные браузера или удалить его и установить заново.
3. Попробуй мобильное приложение ВК.
4. Попробуй полную версию сайта ВК.

Смотри также

• Как скачать и установить приложение ВКонтакте на телефон
• Как зайти в полную версию ВКонтакте
• Как вернуть старую версию ВКонтакте
• Где в новой версии ВКонтакте настройки, мои ответы, музыка, дни рождения, выход, статистика…?
• Как пользоваться ВКонтакте? — Все советы

В начало: Как зайти в мобильную версию ВКонтакте

Как быстро открыть мобильное представление страницы в настольном браузере?

спросил 4 года 9 месяцев назад

Изменено 4 месяца назад

Просмотрено 35 тысяч раз

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

Как открыть мобильное представление веб-сайта из браузера настольного компьютера?

• браузер

• В Windows/Linux нажмите Ctrl + Shift + M
• В macOS нажмите опция + команда + M

Вы также можете найти пункт меню в разделе («Инструменты»), «Веб-разработчик», «Режим адаптивного дизайна».

Сначала необходимо открыть «Инструменты разработчика»:

• В Windows/Linux нажмите Ctrl + Shift + I или просто F12
• В macOS нажмите опция + команда + I

Когда инструменты разработчика открыты и сфокусированы, вы можете включить эмуляцию устройства:

• В Windows/Linux нажмите Ctrl + Shift + M
• В macOS нажмите команда + shift + M

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

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

Вы можете найти пункт меню, нажав «Разработка», «Войти в режим адаптивного дизайна». Если вы не видите пункт меню «Разработка», вам необходимо включить его, открыв «Настройки», «Дополнительно» и отметив «Показать меню «Разработка» в строке меню».

Ответ Флимма на 100% правильный. На всякий случай помнить ярлыки слишком много хлопот, эта синяя кнопка в инструментах разработчика для переключения между просмотром в Интернете и просмотром на мобильном телефоне/планшете:

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

В целях тестирования я использую следующие веб-сайты:

1. http://www.jamus.co.uk/demos/rwd-demonstrations/
2. http://mattkersley.com/responsive/

Оба вышеперечисленных сайта позволяют мне просматривать мое веб-приложение на устройствах разной ширины.

Вы можете установить пользовательский агент и размер окна из командной строки или запустить конфигурацию ярлыка.

& «C:\Program Files\Google\Chrome\Application\chrome.exe» —new-window —window-size=375,812 —user-agent=»Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, например Gecko) Chrome/87.0.4280.67 Mobile Safari/537.36″ —user-data-dir=C:\workspace\tmp\chrome https://google.com

Флаг —user-data является обязательным для выполнения этой работы. Создайте для него папку.

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

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

Приведенные выше ответы отлично подходят для тех, кто любит работать с одним браузером или имеет ограниченное «рабочее пространство» на рабочем столе (например, один монитор менее 21 дюйма с низким разрешением) 9.0005

На самом деле есть еще более интересное решение, которое я недавно обнаружил: https://blisk.io/

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

Этот «браузер, созданный для разработки» на основе Chromium предоставляет множество способов демонстрации страницы на различных устройствах с вертикальной «панелью» с ЛЕВОЙ стороны, так же, как вы видите, что в инструментах разработчика Chrome по умолчанию используется правая вертикальная колонка.

Это работа. Несмотря на то, что у его «расширенной функциональности freemium есть некоторые ограничения», он по-прежнему очень хорошо работает для «предварительного просмотра» как ПК, так и мобильных версий ваших страниц / сайтов в параллельном сравнении. Платные функции также кажутся довольно привлекательными, если вы работаете в удаленных командах (хотя я лично думаю, что нужна лучшая программа «тест-драйва», прежде чем зацепить людей ежемесячной платой).

Полное раскрытие: существует ЧРЕЗВЫЧАЙНО раздражающий «ограничение времени» в день в части предварительного просмотра мобильных устройств (переключается между открытием и закрытием с помощью значка справа от адресной строки — измените «предварительный просмотр устройства» с крошечной ссылки на меню в правом верхнем углу «Показать список устройств»).

Также: Я нашел несколько действительно отличных трюков с расширениями браузера, такими как 2 разных «переключателя агента пользователя» из Chrome/Firefox, которые идут немного дальше, позволяя вам переключаться между строками пользовательского агента браузера различных операционных систем и браузеров. для них.

Похожие публикации:

1. Как сделать сноски в ворде на каждой странице с 1
2. Как удалить autorun inf с флешки
3. Почему меняется адрес биткоин кошелька при копировании
4. Служба политики диагностики не запущена на windows 7 как запустить