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

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

  Делаем мобильный редирект 3-мя способами

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

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

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

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

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

<?php
 $uagent=$_SERVER['HTTP_USER_AGENT'];
 if(preg_match('/(android|bb\d+|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|bb\d+|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-редиректом юзер-агент не важен, т.к. проверяется только ширина экрана. Но здесь посетитель может заметить, как сначала попадает на одну страницу, а потом его перекидывает на другую.

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

web-ru.net - всё о продвижении сайтов
Случайные публикации:
  • Как удалить Яндекс Диск с компьютера?Как удалить Яндекс Диск с компьютера?Что-то много всего я уже написал про Яндекс.Диск. В общем-то он мне нравится,...
  • Как узнать версию WordPress и скрыть версию WP своего сайта?Как узнать версию WordPress и скрыть версию WP своего сайта?...хому хакеру будет проще взломать его :). Если вас это беспокоит, то
  • Неожиданные бэклинкиНеожиданные бэклинки...вообще всё. ТИЦ ресурса на данный момент нулевой, PR главной - 1. Как бы там ни
  • MegaIndex Bar для браузеров Chrome, Firefox, Opera - обзор быстрой аналитикиMegaIndex Bar для браузеров Chrome, Firefox, Opera - обзор быстрой аналитикиСегодня (31 января 2013) известный сервис MegaIndex анонсировал выпуск...
  • Каким должен быть контент на сайте? Факторы продвижения сайта в Гугл.Каким должен быть контент на сайте? Факторы продвижения сайта в Гугл....торые вы должны задать себе. На самом деле, вопросов намного больше.
Оставьте комментарий:
комментариев 29
Через сайт Через ВКонтакте Через Facebook
  1. AK:

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

    Ответить
  2. Алексей:

    Спасибо!
    Спасибо!!
    Спасибо!!!
    =)

    Ответить
  3. Александр:

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

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

    Ответить
    • Пётр:

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

      Ответить
  4. Alisa:

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

    Ответить
  5. Семён:

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

    Ответить
  6. Денис:

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

    Ответить
  7. eu4ria:

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

    Ответить
  8. Михаил:

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

    Ответить
  9. Андрей:

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

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

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

    Ответить
  10. Олег:

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

    Ответить
  11. Михаил:

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

    if(window.innerWidth<600)
    location.href='http://site.ru/mobile/&#039;;

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

    Ответить
    • Пётр:

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

      Ответить
  12. Slavasil:

    на пхп не работает(

    Ответить
  13. Светлана:

    Огромное спасибо!

    Ответить
  14. Костя:

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

    Ответить
  15. Валентин:

    Спасибо Большое. Статья очень пригодилась. Вставил редирект для HTML — работает. Но разрешение, как указал Семен, пришлось выставить побольше (1200) иначе перенаправление на моем смартфоне не работало.

    Ответить
  16. Андрей:

    Не. РНР все таки не работает…

    Ответить
  17. Tiano:

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

    https://site.ru/postname/

    чтобы переадресовала на
    https://m.site.ru/postname/
    при входе с мобильного?

    Ответить
    • Пётр:

      Логика тут такая же.
      Просто к текущему URL надо приписать ‘m.’ и сделать редирект на получившийся адрес.
      Для JavaScript, например:

      if(window.innerWidth<600 && location.href.indexOf('://m.')==-1)
      location.href='https://m.'+location.href.split('://')[1];

      Ответить
  18. Евгений:

    А в каком файле прописывать редирект JavaScript на модэксе и битриксе?

    Ответить
сайт web-ru.net
Я не спамлю...