Авто Мобильное Перенаправление Сайта - PullRequest
13 голосов
/ 01 марта 2012

Я только что сделал свой первый мобильный сайт jQuery.

Я хочу, чтобы люди, просматривающие мой «Полный сайт» с помощью мобильного телефона, автоматически переводились на «МОБИЛЬНЫЙ САЙТ». Но также есть возможность щелкнуть ссылку, чтобы просмотреть полный сайт, если они хотят.

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

Если вы хотите посмотреть, как выглядят сайты, вот полный сайт: http://www.solera -restaurant.com и мобильный сайт все еще находится на моем тестовом сервере: http://graves -incorporated.com/test_sites/solera_mobile/

Ответы [ 5 ]

17 голосов
/ 07 марта 2014
<script type="text/javascript">
        if (screen.width <= 720) {
        window.location = "mobile/index.php";
    }
</script>
15 голосов
/ 01 марта 2012

Обнаружение смартфонов с помощью JavaScript: http://www.hand -interactive.com / resources / detect-mobile-javascript.htm

Обнаружение мобильных устройств с использованием PHP: http://www.hand -interactive.com/resources/detect-mobile-php.htm

Обнаружение iPhone и iPod с использованием JavaScript

http://davidwalsh.name/detect-iphone

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
   if (document.cookie.indexOf("iphone_redirect=false") == -1) window.location = "http://graves-incorporated.com/test_sites/solera_mobile/";
}

PHP

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod'))
{
  header('Location: http://yoursite.com/iphone');
  exit();
}

Вы можете получить javascript здесь: https://github.com/sebarmeli/JS-Redirection-Mobile-Site

Документация здесь: http://blog.sebarmeli.com/2010/11/02/how-to-redirect-your-site-to-a-mobile-version-through-javascript/

Вот еще один мобильный Javascript для обнаружения: https://github.com/miohtama/detectmobile.js

Создайте файл javascript и вставьте этот код:

(function(a,b){if(/android.+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|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/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|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|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|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'http://graves-incorporated.com/test_sites/solera_mobile/');
5 голосов
/ 04 апреля 2013

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

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

1 голос
/ 01 марта 2012

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

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

0 голосов
/ 01 марта 2012

Есть несколько способов, перечисленных здесь , включая PHP.

jQuery one устанавливает переменную jQuery.browser.mobile:

/**
 * jQuery.browser.mobile (http://detectmobilebrowser.com/)
 *
 * jQuery.browser.mobile will be true if the browser is a mobile device
 *
 **/

После этого вы можете перенаправить с помощью обычного JS, например:

if(jQuery.browser.mobile) window.location = 'mobile_url';

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

...