Обнаружение смартфонов не планшетов - PullRequest
Новая
       158

Обнаружение смартфонов не планшетов

1 голос
/ 15 февраля 2012

Я создаю мобильную версию сайта, но только для смартфонов.Если устройство представляет собой планшет, ноутбук, нетбук, настольный компьютер или другое подобное устройство, я хочу, чтобы пользователь автоматически переходил на полный сайт.Если бы это был простой CSS, я бы знал, как это сделать.Однако мобильная версия использует шаблоны и сценарии, отличные от полной версии сайта, и ее необходимо перенаправить соответствующим образом, а не просто использовать другую таблицу стилей.и перенаправить соответственно?

Ответы [ 2 ]

1 голос
/ 30 ноября 2014

Единственный способ найти это - взлом, в котором я:

  1. Используемые css media запросы для обнаружения телефонов с использованием max-device-width

  2. Установить изменение стиля на этой основе - я изменил цвет тела с # 000000 на # 000001

  3. Используйте OnLoad для вызова Javascript, чтобы проверить цвет тела.

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

    <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Phone test</title>
<meta name="viewport" content="width=device-width">
<style type="text/css">
    body
    { color: rgb(0, 0, 0);}
    @media screen and (max-device-width:600px), screen and (max-width:600px)
    {
        body{ color: rgb(0, 0, 1);}
    }
</style>
<script type="text/javascript">
<!--
function doPhoneCheck()
{
    var col;
    if(document.body.currentStyle)
    {
        col = document.body.currentStyle.color; // IE
    }
    else
    {
        col = getComputedStyle(document.body).getPropertyValue("color");
    }
    if(col =="rgb(0, 0, 1)")
    {
        window.location.href="http://www.apple.com/";
    }
}
//-->
</script>

Он обнаруживает все iPhone до 6+, а также телефоны Android и Windows, которые я тестировал. Он дискриминирует все текущие iPad и ноутбуки и настольные компьютеры, которые я пробовал.

NB

(1) Для цвета вы должны использовать rgb и оставить пробелы в точности как написано.

(2) Я обнаружил, что подобный код не будет определять цвет фона тела по неизвестной причине.

(3) Ключом к обнаружению стиля css является использование getComputedStyle () (или currentStyle для IE) вместо getStyle ().

(4) Хотя изменение цвета тела незаметно, его можно переопределить, указав цвета для всех ваших классов CSS и т. Д.

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

Рабочее решение вашей проблемы можно найти здесь: https://github.com/sebarmeli/JS-Redirection-Mobile-Site

...