Как сделать редирект на мобильную версию сайта — PHP, .htaccess и HTML

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

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

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

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

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

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

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

Например, люди попадают на страницу 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-метки — это более универсальный вариант. Итоговый код получается такой:

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

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

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

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

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

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

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

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

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

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

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

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

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

Если нужно, чтобы все мобильные посетители, зашедшие на 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 , то можно использовать следующий код:

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

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

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

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

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

• Как добавить комментарии Фейсбук на сайт WordPress . сплывающее окно, где вам нужно выбрать вкладку «Правила модерации» Здесь вы можете
• Немного юмора от Яндекса - кириллическая капча . ать в капче на странице "Ой!" (туда можно попасть, если несколько раз
• Что такое поисковый спам (спамдексинг)? Поисковые системы, как известно, не любят всяческие попытки повлиять на.
• Покупать ли ссылки для продвижения сайта? . у его ссылкам. За 2015-й год в Рунете столько всего о них было сказано, что
• Конкурс Летняя жара на $100K от WelcomePartners Половина лета пролетела в футбольной лихорадке. Финал вчера выиграли французы, с чем.

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

Очень хорошая статья, но почему то у меня не работает способ Передача меток на мобильный лендинг с помощью PHP. Может есть какая то хитрость?

А способ со скриптом не работает в некоторых телефонах, хотя разрешение у них явно меньше 800 px.

Хитростей нет, возможно, что-то упустили — не поставили кавычки где-нибудь и т.п. Ошибка может быть либо при передаче меток на лендинг, либо при приёме их на лендинге.

Огромнейшее СПАСИБО. я все голову ломала, как перекинуть пользователей на мобильную версию, все сработало ОТЛИЧНО. Подробно и ясно, особенно для меня, чайника просто все разжевано. Еще раз вам ОГРОМНОЕ спасибо! =) =) =)

Пиз*дец как у меня пригорело, когда не мог допереть почему у меня телефон не редиректит на мобильную версию. Это статья баян. И телефоны уже с расширениеМ экрана получше. ВЫСТАВЛЯЙТЕ СМЕЛО 1200 ЗА МЕСТО 600. *HELP* *MACHO*

Спасибо большое! Пробовал много вариантов, но именно ваш скрипт помог =)

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

Ну да, тут попридумывать ещё надо.

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

Петр, спасибо огромное! Статья крайне полезная и четкая. Отдельное спасибо за информацию по передаче UTM!

Правда, лично мне, был бы крайне полезен код для переадресации с utm-метками через .htaccess. Ибо сайт сделан на Adobe Muse и со скриптом .php почему-то не получается.

Буду Вам очень признателен, если поделитесь готовым решением и для .htaccess с UTM!

Я, наверное, перерыл всю информацию о мобильных версиях в сети. Изначально хотел сделать самостоятельно отдельную мобильную версию сайта на поддомене. Но узнал, что поисковые системы гораздо лучше относятся именно к адаптации сайта под рвзные устройства. Потому что используется один контент и одна ссылка. Начал пробовать сделать адаптацию своими руками, но там очень много подводных камней. Стили нужно прописывать чуть ли не под каждый гаджет. Т.е. под каждую ширину экрана нужно создавать новые параметры отображения всех блоков. Решил найти специалиста, который разбирается в этом. Это тоже оказалось не так просто. Разброс цен аховый. От 500 руб до 100 000 руб. Понятное дело — решил начать с 500)) После общения, конечно же, оказалось что адаптация моего сайта стоит не 500 руб, а 17 000 руб))) Но после долгих поисков нашел оптимальный вариант по всем параметрам. Адаптацию сайта поручил им mobile-version.ru и не пожалел. Сразу сказали адекватную стоимость уже на своем сайте и потом она не изменилась. Все мои пожелания выполнени и даже внесли свои предложения бесплатно! Теперь мой сайт проходит тесты от гугла, и яндекс вебмастер тоже счастлив, наблюдая за моим сайтом. Для тех, кто еще сомневается — делать или не делать адаптацию — ДЕЛАЙТЕ. 8) Поисковики заставят сделать мобильные версии всем сайтам. Вопрос времени.

Подскажите пожалуйста, у меня на хостинге нет поддержки php, сайт prestigechat.ru. В страницу HTML вписываю код:

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