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

Что такое мобильная версия и зачем она нужна

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

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

Вообще, есть несколько способов перекладывания десктопных версий сайтов на мобильные устройства:

• Адаптивный дизайн. В этом случае берутся разрешения экранов мобильных гаджетов, проводится анализ всех блоков на сайте, после чего верстальщик создает новый CSS, в котором эти блоки ведут себя иначе – имеют другую ширину, иначе располагаются относительно друг друга и так далее. Переключение между версиями верстки чаще всего ложится на плечи JS. Это – самый простой вариант, но у него есть 2 существенных минуса. Первый – полный перенос «обычной» версии плохо влияет на загрузку страницы, потому что толком нет никакой оптимизации – а страницы на мобильных устройствах в среднем грузятся медленнее, потому что их открывают через мобильный интернет, который работает хуже, чем стандартный от провайдера. Второй минус – часто можно забыть про удобную навигацию, если на кнопку меню в «обычной» версии можно было просто кликнуть, то на мобильных устройствах на нее нужно тапнуть пальцем, и если кнопка – маленькая, то это будет крайне неудобно.
• WEB-приложение. С помощью бесплатных сервисов можно создать приложение, которое в качестве своей графической основы будет использовать разметку. Это позволяет пользоваться им и как приложением, и как сайтом. Этот подход – довольно новый, бесплатные версии сервисов по созданию такого приложения есть, но – с большим количеством ограничений. Поскольку это не является полноценной мобильной версией, мы web-приложения рассматривать не будем.
• Мобильная версия. То, о чем мы здесь говорим. Наиболее Google Mobile Friendly-версия, хороша для поисковой оптимизации, ведет к максимальному удобству пользователей. Суть проста – для экранов смартфонов создается полноценная отдельная версия сайта, которая хранится где-то на поддомене. Проверку мобильного входа и необходимость перенаправления пользователя на мобильную версию проводит непосредственно сервер в момент поступления запроса. Некоторые элементы адаптивной верстки здесь тоже есть, потому что экраны мобильных устройств могут быть разными по ширине, но в целом есть жесткое разделение – пользователями ПК используется одна версия, мобильными пользователями – другая. Под мобильную версию сайта разрабатывается отдельная версия отображения страницы, то есть отдельный шаблон дизайна (что и оптимизирует сайт для мобильных устройств, обеспечивая быструю загрузку). Технически мобильные версии сайтов можно создать с помощью специальных сервисов, но чаще на практике приходится делать все руками, из чего и проистекают основные минусы мобильной версии – дорого и долго.

Ниже мы будем говорить как о создании полноценной мобильной версии, так и «бюджетной» мобильной версии какими-либо сервисами.

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

Основные признаки мобильной версии:

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

Естественно, мобильная версия должна быть разработана с сохранением стиля сайта, чтобы пользователь не пытался понять, туда ли он попал. Бюджетная версия – нарезание основного шаблона на знакомые элементы (лого, кнопки, цветовая гамма). Наиболее эффективное решение – заказ нового шаблона, конкретно под мобильную версию. С поддоменом все просто – когда пользователь обращается через www.имя-вашего-сайта, сервер при получении запроса смотрит мета-информацию HTTP-запроса, в котором указано устройство, и уже на этом основании перенаправляет пользователя на мобильный поддомен при необходимости. Третий признак – адаптация под навигацию через мобильные устройства – означает, что даже «нарезанный из исходников» дизайн был переосмыслен таким образом, что пользователю комфортно пользоваться мобильной версией.

Отличия мобильной версии от адаптивной

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

Плюсы и минусы адаптивной версии

Плюсы:

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

Минусы:

• Менее user-friendly интерфейс.
• Нет поисковой оптимизации.

Плюсы и минусы мобильной версии

Плюсы:

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

Минусы:

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

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

Самостоятельная разработка

Если у вас есть время и/или деньги – можете заняться самостоятельной разработкой мобильной версии сайта. Для начала вам нужно выделить на хостинге какой-то каталог, который будет поддоменом – обычно его называют m, адрес мобильной версии в этом случае – m.адрес_вашего_сайта. Кроме того, вам придется немного переписать код обработки запросов сервером, чтобы сервер распознавал, куда нужно оправлять запрос пользователя (гуглите скрипты под ваш веб-сервер или плагины под вашу CMS). После того, как вы перенесете дизайн, вам нужно будет дописать код так, чтобы обе версии правильно между собой синхронизировались – здесь сложно дать какой-то конкретный совет, как минимум смотрите, чтобы не поломались зависимости.

Самая большая проблема здесь – дизайн для мобильной версии, который вам нужно где-то взять. Выше мы уже говорили, что есть 2 основных варианта: либо вы заказываете новый дизайн (предпочтительно, но требует денег), либо вы самостоятельно нарезаете новый дизайн из уже существующего шаблона десктопной версии сайта. 

Есть несколько вещей, которые вам нужно учитывать при разработке отдельной мобильной версии сайта. Вот они:

• Оптимизируйте дизайн мобильной версии так, чтобы он хорошо работал с медленным интернетом. Скорость и стабильность мобильного интернета – хуже, чем у обычного интернета от провайдера. Поэтому вам нужно использовать меньше кода на JS, пережимать картинки и безжалостно вырезать лишнее. По-хорошему нужно делать картинки разного масштаба для десктопной и мобильной версии – вы можете делать это как вручную, так и с помощью специальных плагинов для CMS. Эти плагины будут получать исходную картинку и автоматически ее пережимать для мобильной версии.
• Пересмотрите расположение ключевых блоков. Переписывать контент под мобильную версию – это перебор, но всю контактную информацию, форму обратной связи и другие вещи, обеспечивающие вам конверсию, лучше разместить так, чтобы пользователь мог добраться до них максимально быстро.
• Не злоупотребляйте скриптами. Телефоны нынче довольно мощные, но перегружать страницу скриптами все равно не стоит – обычно у пользователя на фоне висит куча открытых приложений, и прожорливый Chrome может тупить при загрузке страницы с большим количеством скриптов – вы можете потерять читателя/клиента из-за этого.
• Адаптируйте дизайн под мобильные устройства. Про этом мы уже говорили выше – если мышь позволяет делать точные позиционированные клики, то палец имеет свойство часто промахиваться по маленьким объектам. Делайте кнопки большими.

CMS 

Если вы используете CMS, у вас есть 3 основные опции:

1. Создание мобильной версии сайта с нуля. Очень похоже на то, что мы описывали выше, но вы создаете мобильную версию с нуля на базе CMS и уже готовой десктопной версии, а не полностью с нуля. В этом есть ряд своих преимуществ, потому что CMS (не без помощи плагинов) упрощает создание дизайна и связывание между собой мобильной версии, десктопной версии и бэкенда. Но не думайте, что все станет просто и прозрачно – хоть CMS и помогает решить ряд проблем, вопросы адаптации дизайна/перегруженности страницы все еще полностью лежат на вас, так что придется изрядно поработать.
2. Поиск нового шаблона с мобильной версией. Если у вас – простой сайт (блок, одностраничник и так далее), и вы не накручивали поверх шаблона дополнительный функционал, вы можете без лишних проблем поменять обычный шаблон на адаптивный или поддерживающий мобильную версию. Скорее всего, после перехода на новый шаблон вам придется руками исправлять небольшие ошибки вроде слетевших на мобильной версии второстепенных плагинов, но это все еще куда более простой вариант, чем создание своей собственной мобильной версии с нуля.
3. Подключение плагинов, создающих мобильную или адаптивную верстку. Основные – WPtouch, WPmobile, Mobile Smart (все – для WordPress). WPmobile умеет даже создавать web-приложение на основе страницы. Несмотря на то, что плагины выглядят очень заманчиво, мы советуем относиться к этой идее с осторожностью, потому что такие плагины далеко не идеальны, и вам все равно придется решать проблемы переноса и совместимости руками. Если у вас – большой сайт с кучей дополнительного функционала, решение проблем, вызванных плагинами переноса, может занять намного больше времени, чем разработка своего дизайна. Как вариант – можете подключить такой плагин, посмотреть на «сырой» результат его работы и откатить все обратно, если посчитаете, что исправлять проблемы будет дольше по времени, чем создать свой дизайн. 

Конструкторы сайтов

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

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

Что нужно учесть и предусмотреть перед созданием мобильной версии сайта

Основные пункты:

• Продумайте кнопки и меню. Они должны быть достаточно большими, пользователь должен понимать, что ему удалось нажать на них (чаще всего меняется цвет или размер).
• Используйте одну колонку. 2 колонки на экране мобильного просто не поместятся.
• Грамотно подбирайте шрифт. Он не должен быть слишком маленьким (его будет невозможно прочитать) и не должен быть слишком большим (чтобы пользователю не нужно было скроллить текст каждые 3 секунды).
• Упростите формы ввода. Набирать текст с телефона – не самое удобное занятие, поэтому сделайте формы как можно более сухими.
• Старайтесь не использовать сложные скрипты и анимацию. Страница будет грузиться медленно и пользователь уйдет с сайта.

Тестирование мобильной версии

Основные инструменты тестирования:

• Google Mobile Friendly.
• Responsinator.
• Adaptivator.

Полезные советы и чек-листы

1. Выбираете подход: самостоятельное создание, CMS, плагины, конструкторы сайтов.
2. Выбираете инструменты: заказ дизайна, самостоятельная нарезка, конкретные плагины, конкретный конструктор.
3. Продумываете особенности мобильной адаптации: функционал страницы, шрифты, кнопки и так далее.
4. Реализовываете: все верстаете/устанавливаете/прикручиваете, затем отлаживаете.
5. Тестируете: открываете страницу на разных устройствах, прогоняете через сервисы, проверяете работоспособность формочек/кнопочек.

Что почитать по теме

• Как тестировать мобильную версию в десктопном браузере.
• Гайд по мобильным версиям от Mozilla Firefox.

FAQ

Что лучше – мобильная версия или адаптивная верстка?

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

Стоит ли рассматривать вариант с полноценным приложением?

Чаще всего – нет. У приложения свои каналы распространения, то есть вам нужно будет тратить деньги на другой маркетинг (рекламу в сторах). Если вы не знаете, зачем вам нужно приложение – оно вам не нужно, лучше создайте мобильную версию или сделайте адаптивную верстку.

Подведем итоги

Тезисно:

• Адаптировать страницу сайта для мобильных устройств можно тремя способами: адаптивная верстка, web-приложение, мобильная версия.
• Мобильная версия – это когда вы создаете полноценный сайт для мобильный устройств и кладете его на свой поддомен.
• Полноценная мобильная версия – сложный проект, зачастую требующий своего собственного дизайна (и денег на макет).
• Основные способы создания: с нуля; на базе CMS; с помощью плагинов; через конструкторы сайтов.
• Если вы не уверены в том, нужна ли вам мобильная версия – лучше просто сделайте адаптивный дизайн, он требует меньше ресурсов и времени.

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

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

В Google Chrome

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

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

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

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

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

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

В Mozilla Firefox

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

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

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

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

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

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

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

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

Ручной метод

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

Для чего это нужно?

Данный навык будет полезен при:

Источник

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

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

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

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

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

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

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

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

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

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

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

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

Источник

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

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

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

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

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

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

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

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

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

Источник

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

Некоторые мобильные сайты более удобны в использовании, чем те, что открываются в десктопных браузерах. К счастью, можно сделать так, чтобы в 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, вы сможете делиться снимками прямо с компьютера, предварительно обработав их в графическом редакторе.

Источник

Как Посмотреть Мобильную Версию Сайта на Компьютере

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

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

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

Способ 1

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

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

Способ 2

Как я и говорил, немного больше действий потребуется. Нужно зайти на сервис http://www.responsinator.com, и уже там, в шапке сайта ввести адрес своего или проверяемого сайта. Дальше просто нажать ОК и дождаться загрузки. Всё, смотрим мобильную версию сайта на компьютере и наслаждаемся адаптацией, если, конечно, проверяете свой сайт.

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

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

Источник

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

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

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

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

Сразу возникает вопрос, а в чём же сложность? В отличие от адаптивного дизайна, мобильный шаблон — это отдельный набор файлов и стилей, который доступен только пользователям мобильных устройств. Такая избирательность реализуется путём определения соответствия параметра « 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 и добавить новые фото в свой профиль. А как вам удалось разрешить проблему полной и мобильной версии сайта?

Источник

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

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

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

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

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

Ну что, готовы разобраться? Тогда поехали!

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

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

Открываем нужный сайт и переходим в режим разработчика нажав клавишу F12 или комбинацию Ctrl + Shift + I

Еще один способ открыть режим разработчика, это кликнуть на пустом месте правой кнопкой мыши и выбрать опцию “Посмотреть код“

В открывшемся окне нажимаем на иконку версий сайта “Togle device toolbar” или можно открыть данную опцию комбинацией клавиш Ctrl + Shift + M

Откроется мобильная версия сайта, а нажимая на прямоугольные полоски вверху, есть возможность смотреть отображение сайта на разных устройствах.

Открыв список “Dimentions” есть возможность посмотреть отображение сайта с различных моделей телефонов.

Чтобы закрыть панель разработчика, жмем крестик на самой панели справа вверху или закрываем повторным нажатием F12 или комбинацией клавиш.

Вот такой простой способ посмотреть мобильную версию сайта. Я считаю, что данный способ намного удобней, чем менять размер браузера. А вы как считаете?

Если инструкция была полезна, поставьте оценку, поделитесь с друзьями. До связи!

Источник

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

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

Под какие разрешения проверять? Наиболее популярные разрешения(DPR) экранов

На основании статистики https://www.hotlog.ru/global/screen на начало 2020 г. наиболее популярными реальными(виртуальные DPR) разрешениями экрана среди мобильных были следующие:

Как видно из статистики минимальная ширина экрана 320 px, поэтому лучше, если проверка мобильной версии сайта начинается именно с этой цифры и размер постепенно увеличивается.

Выше рассматривалась статистика по телефонам, но к мобильным устройствам также относятся и планшеты. Наиболее популярные разрешения среди планшетов 1024x768px и 1280x800px. Планшеты составляют всего 2,7% от всех устройств, с которых заходят в интернет(53,3% телефоны и 44% компьютеры), согласно исследованиям We Are Social и Hootsuite за 2019 г. При этом доля планшетов продолжает падать и за 2019 г. уменьшилась на 27%.

Учтите, что при отображении сайта на мобильном устройстве отсчет идет не от физических пикселей(они указаны в тех. характеристиках), а от виртуальных(DPR). Например, Samsung Galaxy S10 имеет разрешение 1440x3040px(физические пиксели, указанные в характеристиках), но фактически при отображении сайта такая детализация не нужна, поэтому реальное разрешение будет соответствовать 360x740px(виртуальные пиксели DPR). Проще говоря, каждые 16(4×4) физических пикселей будут сливаться вместе и выглядеть как один реальный(виртуальный).

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

Как узнать реальное(виртуальное DPR) разрешение смартфона

К сожалению, в характеристиках мобильных телефонов, как правило, не указывают число виртуальных пикселей, поэтому остается только искать таблицы соответствия физических и виртуальных пикселей в поисковиках, например, по запросу «viewport size».

1. Обычный браузер: Яндекс.Браузер, 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)»

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

Как включить «Режим адаптивного дизайна(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.

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

Проверка мобильной версии сайта на компьютере в Mozila Firefox. Достаточно открыть сайт и сжать окно просмотра.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6. Google test (1 из 5 баллов)

Google test, позволяет без регистрации и входа на сайт проверить, как отображается только верхняя часть сайта на мобильном телефоне. Нельзя посмотреть, как выглядит мобильная версия сайта на компьютере целиком, даже в единственном доступном разрешении — отображается только верхняя часть(область без прокрутки страницы).

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

— Проверка только с одним разрешением, около 410px по ширине, а это размер всего 12% мобильных устройств на начало 2020 г.

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

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

Источник

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

Меня эта тема заинтересовала, т.к. сам я, временами занимаясь арбитражом, не догадывался автоматически разделить поток трафика исходя из устройства. Так что сейчас расскажу о 3-х способах сделать редирект на мобильную версию сайта — с помощью php, .htaccess и html (точнее — JavaScript).

• на PHP
• в .htaccess
• HTML (JavaScript)

Делаем мобильный редирект на PHP

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

У мобильных устройств существует просто куча разных юзер-агентов. Я нашёл код, где учтены, наверное, почти все эти агенты:

<?php
 $uagent=$_SERVER['HTTP_USER_AGENT'];
 if(preg_match('/(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$uagent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i',substr($uagent,0,4)))
    header('location: http://site.ru/mobile/');
 ?>

Вставьте код в самое начало документа, а вместо http://site.ru/mobile/ подставьте URL, на который должны улетать мобильные пользователи. Обратите внимание, что перед этим кодом не должно быть даже пробельных символов и переводов строк — таковы уж особенности редиректов на PHP.

Передача меток и субаккаунтов на мобильный лендинг с помощью PHP

Обычно при ведении рекламных кампаний нужно получить как можно больше информации о трафике. Для этого используются, в основном, UTM-метки и субаккаунты для CPA-сетей. Хорошо бы при перенаправлении посетителя на мобильный лендинг передать и все эти данные.

Передача UTM-меток

Например, люди попадают на страницу http://site.ru/page/?utm_source=xxx&utm_medium=yyy&utm_content=zzz. Нужно, чтобы все мобильные юзеры ушли на http://site.ru/mobile/?utm_source=xxx&utm_medium=yyy&utm_content=zzz.

Для этого можно просто отрезать всё, что после ? и приклеить к мобильному URL. Однако, если исходная страница уже содержит GET-параметры, то лучше по отдельности «выцепить» все UTM-метки — это более универсальный вариант. Итоговый код получается такой:

<?php
 $uagent=$_SERVER['HTTP_USER_AGENT'];
 if(preg_match('/(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$uagent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i',substr($uagent,0,4))){
    $utm_source=$_GET['utm_source'];
    $utm_medium=$_GET['utm_medium'];
    $utm_content=$_GET['utm_content'];
    header('location: http://site.ru/mobile/?utm_source='.$utm_source.'&utm_medium='.$utm_medium.'&utm_content='.$utm_content);
 }
 ?>

Передача субаккаунтов

Чтобы понять принцип действия, почитайте статью про UTM-метки и субаккаунты в CPA.

Если партнёрская ссылка, по которой мобильный посетитель должен уйти, такая http://advjump.com/go/0f3c13f70409426ba0eee42428aa9b3e365b64d1eb0a0b0b/?subid=mobile-xxx&subid1=yyy&subid2=zzz, то последняя строчка в коде выше становится такой:

header('location: http://advjump.com/go/0f3c13f70409426ba0eee42428aa9b3e365b64d1eb0a0b0b/?subid=mobile-'.$utm_source.'&subid1='.$utm_medium.'&subid2='.$utm_content);

Т.е. здесь мы из UTM-меток получили данные для субаккаунтов.

Мобильный редирект в .htaccess

Смысл тот же — исследуем юзер-агент. Если нужно сделать перенаправление с http://site.ru/page/ на http://site.ru/mobile-page/, то добавьте в .htaccess такой код:

RewriteCond %{HTTP_USER_AGENT} (?i:midp|samsung|nokia|j2me|avant|docomo|novarra|palmos|palmsource|opwv|chtml|pda|mmp|blackberry|mib|symbian|wireless|nokia|hand|mobi|phone|cdm|upb|audio|SIE|SEC|samsung|HTC|mot-|mitsu|sagem|sony|alcatel|lg|eric|vx|NEC|philips|mmm|xx|panasonic|sharp|wap|sch|rover|pocket|benq|java|pt|pg|vox|amoi|bird|compal|kg|voda|sany|kdd|dbt|sendo|sgh|gradi|jb|dddi|moto|iphone|android)
RewriteRule ^([^mobile]*?)page/?$ http://site.ru/mobile-page/ [R=301,L]

Эта конструкция должна идти после строки RewriteEngine On (если её нет — добавьте).

Если же нужно отправить всех мобильных посетителей на mobile-версию сайта (с любой страницы на http://m.site.ru/), то последняя строчка из кода выше может иметь такой вид:

RewriteRule ^.*$ http://m.site.ru/ [R=301,L]

Как передать UTM-метки и субаккаунты посредством .htaccess я рассматривать не буду, т.к. много там заморочек. Да и вообще, если вы не очень понимаете представленные здесь коды, то лучше используйте вариант с PHP или JavaScript, речь о котором дальше.

Перенаправление на мобильную версию сайта в HTML (JavaScript)

Иногда нет возможности что-то редактировать на сайте на стороне сервера — например, вы используете конструктор сайтов. Тут-то и пригодится редирект на HTML, а точнее — на JavaScript, т.к. на простом HTML нужные условия не прописать.

Если нужно перекинуть мобильных юзеров на страницу http://site.ru/mobile/, то можно использовать такой код:

<script type='text/javascript'>
if(window.innerWidth<600)
	location.href='http://site.ru/mobile/';
</script>

В этом случае все посетители, у которых ширина экрана меньше 600 px улетят на http://site.ru/mobile/. Если нужна меньшая ширина — меняйте 600 на меньшее значение.

Передача меток и субаккаунтов на мобильный лендинг с помощью JavaScript

При перенаправлении этим способом также можно сохранить данные о трафике.

Передача UTM-меток

Если нужно, чтобы все мобильные посетители, зашедшие на http://site.ru/page/?utm_source=xxx&utm_medium=yyy&utm_content=zzz перекинулись бы на http://site.ru/mobile/?utm_source=xxx&utm_medium=yyy&utm_content=zzz, то можно использовать следующий код:

<script type='text/javascript'>
if(window.innerWidth<600){
	var url='http://1derevo.ru/mobile/', l=location.href;
	var utm_source=l.match(/utm_source=[^&]*/);
	var utm_medium=l.match(/utm_medium=[^&]*/);
	var utm_content=l.match(/utm_content=[^&]*/);
	location.href=url+'?'+utm_source+'&'+utm_medium+'&'+utm_content;
}
</script>

Передача субаккаунтов

Если нам нужно отправить мобильного юзера по адресу http://advjump.com/go/0f3c13f70409426ba0eee42428aa9b3e365b64d1eb0a0b0b/?subid=mobile-xxx&subid1=yyy&subid2=zzz, то код немножко изменится:

<script type='text/javascript'>
if(window.innerWidth<600){
	var url='http://1derevo.ru/mobile/', l=location.href;
	var utm_source=l.match(/utm_source=([^&]*)/);
	var utm_medium=l.match(/utm_medium=([^&]*)/);
	var utm_content=l.match(/utm_content=([^&]*)/);
	location.href='http://advjump.com/go/0f3c13f70409426ba0eee42428aa9b3e365b64d1eb0a0b0b/?subid=mobile-'+utm_source[1]+'&subid1='+utm_medium[1]+'&subid2='+utm_content[1];
}
</script>

Т.е. из UTM-меток получили субаккаунты.

Какой способ мобильного редиректа лучше?

По скорости перенаправления лучше PHP и .htaccess, т.к. здесь посетитель даже не видит, что его перекидывает. Однако тут всё привязано к юзер-агенту. Если у посетителя будет неизвестный юзер-агент, то редиректа не произойдёт.

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

Так что решайте сами, какой вид мобильного редиректа вам больше по душе

Loading…