Як додати на свій сайт код переадресації на мобільну версію

Завдання:

Потрібно визначити, що користувач зайшов на сайт з мобільного пристрою, і якщо так, то перенаправити його на "http://<mobile_site>".

"<mobile_site>" буде виду "<Ваш_домен>.shop-mobilizer.com".

Так само підтримується суб-домен для вашого домену, наприклад: "m.<Ваш_домен>". (Суб-домен повинен бути налаштований у вашому DNS як аліас / CNAME на "<Ваш_домен>.shop-mobilizer.com").

Рішення:

Потрібно додати JavaScript код в "<head>" секцію сайту.

Метод 1:

<head>
  ..
  <script>
  if('ontouchstart' in window || navigator.msMaxTouchPoints > 0)
    location.href = 'http://<mobile_site>';
  </script>
  ..
</head>

Переваги цього методу - простота. Недолік - користувачі мобільних пристроїв завжди будуть перенаправлені на мобільну версію.

Для вирішення пропонуємо Метод 2:

<head>
  ..
  <script>
  (function(ALS){
  if(!ALS)return;
  if(ALS['mobile_state'] != 'not_redirect')
    ALS['mobile_state'] =
    (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0))
    ? 'redirect' : 'not_mobile';
  if((location.hash == '#mobile=no')&&(ALS['mobile_state'] == 'redirect'))
    ALS['mobile_state'] = 'not_redirect';
  if(ALS['mobile_state'] == 'redirect')
    location.href = 'http://<mobile_site>';
  })(window.localStorage);
  </script>
  ..
</head>

Метод 2 підтримує параметр адресного стрічки "#mobile=no", який дозволяє зупинити автоматичну переадресацію. Використовується змінна "mobile_state", яка зберігається в localStorage.