Как определить мобильные устройства и показать им специальную тему?

Как и большинство, я настоятельно рекомендую использовать WPTouch. Однако он больше ориентирован на поддержку блогов, чем других форматов сайтов, поэтому я знаю, что это не панацея для мобильных решений (я веду свой портфолио на WordPress, так же как и блог, и мое портфолио выглядит как **** в WPTouch).

Поэтому я изучил код, чтобы найти соответствующие части, которые вам понадобятся для повторения функционала обнаружения мобильных браузеров. Во-первых, как упомянул Jan Fabry, это список user agent'ов мобильных браузеров. WPTouch включает стандартный список, но также позволяет добавлять собственные user agent'ы через настройки или фильтр под названием wptouch_user_agents:

function bnc_wptouch_get_user_agents() {
    $useragents = array(           
        "iPhone",                                // Apple iPhone
        "iPod",                                  // Apple iPod touch
        "Android",                               // 1.5+ Android
        "dream",                                 // Pre 1.5 Android
        "CUPCAKE",                               // 1.5+ Android
        "blackberry9500",                        // Storm
        "blackberry9530",                        // Storm
        "blackberry9520",                        // Storm v2
        "blackberry9550",                        // Storm v2
        "blackberry9800",                        // Torch
        "webOS",                                 // Palm Pre Experimental
        "incognito",                             // Другой браузер для iPhone
        "webmate",                               // Другой браузер для iPhone
        "s8000",                                 // Браузер Samsung Dolphin
        "bada"                                   // Браузер Samsung Dolphin
    );

    $settings = bnc_wptouch_get_settings();
    if ( isset( $settings['custom-user-agents'] ) ) {
        foreach( $settings['custom-user-agents'] as $agent ) {
            if ( !strlen( $agent ) ) continue;

            $useragents[] = $agent; 
        }       
    }

    asort( $useragents );

    // Фильтр User Agent'ов WPtouch
    $useragents = apply_filters( 'wptouch_user_agents', $useragents );

    return $useragents;
}

Однако основная часть плагина — это класс:

class WPtouchPlugin {
    var $applemobile;
    var $desired_view;
    var $output_started;
    var $prowl_output;
    var $prowl_success;

    ...

Конструктор плагина (function WPtouchPlugin()) сначала добавляет действие к хуку plugins_loaded для обнаружения user agent'а мобильного браузера и установки $applemobile в значение true. Вот соответствующая функция:

function detectAppleMobile($query = '') {
    $container = $_SERVER['HTTP_USER_AGENT'];

    $this->applemobile = false;
    $useragents = bnc_wptouch_get_user_agents();
    $devfile =  compat_get_plugin_dir( 'wptouch' ) . '/include/developer.mode';
    foreach ( $useragents as $useragent ) {
        if ( preg_match( "#$useragent#i", $container ) || file_exists( $devfile ) {
            $this->applemobile = true;
        }       
    }
}

Теперь плагин знает, что вы используете мобильный браузер (согласно user agent'у браузера). Следующая важная часть плагина — это набор фильтров:

if ( strpos( $_SERVER['REQUEST_URI'], '/wp-admin' ) === false ) {
    add_filter( 'stylesheet', array(&$this, 'get_stylesheet') );
    add_filter( 'theme_root', array(&$this, 'theme_root') );
    add_filter( 'theme_root_uri', array(&$this, 'theme_root_uri') );
    add_filter( 'template', array(&$this, 'get_template') );       
}

Каждый из этих фильтров вызывает метод, который проверяет, установлено ли $applemoble в true. Если да, то WordPress будет использовать мобильную таблицу стилей, мобильную тему и мобильный шаблон для записей/страниц вместо стандартных для вашей темы. По сути, вы переопределяете поведение WordPress по умолчанию в зависимости от того, совпадает ли user agent используемого браузера с вашим списком "мобильных браузеров".

WPTouch также включает возможность отключения мобильной темы — при посещении сайта с WPTouch на iPhone внизу есть кнопка, позволяющая просматривать сайт в обычном режиме. Возможно, вам стоит учесть это при создании собственного решения.

Отказ от ответственности: Весь вышеуказанный код скопирован из исходников WPTouch версии 1.9.19.4 и защищен лицензией GPL. Если вы повторно используете этот код, ваша система также должна соответствовать условиям GPL. Я не являюсь автором этого кода.

Возможно, вам стоит изучить, как это делает очень популярный плагин WPtouch. Он предоставляет отдельную тему для "iPhone, iPod touch, Android, Opera Mini, Palm Pre, Samsung touch и мобильных устройств BlackBerry Storm/Torch". Я вижу список user agent'ов в их исходном коде, вероятно, это ключевой момент.

Другой плагин, WP-Wurfled, использует обширную базу данных Wireless Universal Resource File. Эта постоянно обновляемая база данных мобильных устройств также содержит множество информации о возможностях, так что вы можете узнать на стороне сервера разрешение экрана устройства, поддерживает ли оно Flash, и так далее.

Хук template_redirect часто используется для загрузки пользовательских тем, так как это почти последний момент перед подключением реального файла шаблона (хук template_include является последним, но это фильтр).

Рискуя не ответить на вопрос напрямую, я бы посоветовал так не делать.

Я пользуюсь устройствами iOS уже несколько месяцев, и одной из первых вещей, которые я сделал, когда купил свой iPad, была попытка создать CSS-макет, который менял бы свое поведение в зависимости от используемого устройства (и, изначально, ориентации экрана).

На момент написания это работает на моем тестовом сайте (http://dev.semiologic.com/). Если протестировать его на устройстве iOS, можно заметить, что макет меняется с колонки с боковыми панелями на iPad до одноколоночного на iPhone. (Боковые панели располагаются в две колонки, а нижние блоки — в две колонки под ними.) Эффект можно воспроизвести в Safari, уменьшив ширину браузера.

Как бы интересно это ни было программировать, в итоге я понял, что, по крайней мере на устройствах iOS, оптимизированный для мобильных устройств макет только ухудшает ситуацию. Встроенное масштабирование Safari Mobile устроено так, что, если ваша основная колонка имеет ширину 480 пикселей, ваш сайт уже оптимизирован для мобильных устройств. Добавьте боковую панель шириной 240 пикселей для макета шириной 720 пикселей, и ваш сайт будет отлично выглядеть на всех устройствах:

• 1024x768 (iPad в альбомной ориентации)
• 768x1024 (iPad в портретной ориентации)
• 800x600 (пользователи с плохим зрением)
• 480x320 (iPhone в альбомной ориентации)
• 320x480 (iPhone в портретной ориентации, с автоматическим масштабированием)

500 пикселей + 250 пикселей также подойдет, если вы предпочитаете общую ширину в 750 пикселей, учитывая встроенное масштабирование Safari Mobile. Сайт по-прежнему будет хорошо выглядеть и останется удобочитаемым на iPhone в обоих режимах.

В любом случае, возвращаясь к вашему вопросу, тестирование показало, что единственное, чего вам точно НЕ следует делать, — это использовать макет с гибкой шириной. (Кстати, WP-touch делает именно это, если я не ошибаюсь.) Это приводит к неоптимальному масштабированию. На iPad можно увеличить масштаб содержимого, ограниченного колонкой шириной 480 пикселей, что позволяет увеличить размер текста; макет, который «подстраивается» под ширину экрана, заставляет вас читать мелкий текст или прокручивать страницу по горизонтали, если текст слишком мал для комфортного чтения...

Просто: Используйте функцию wp_is_mobile() для проверки - она вернет true для всех мобильных устройств (смартфонов, планшетов и т.д.).

Обновление

Пожалуйста, не делайте так. Это не работает надежно.

Это действительно отличный скрипт, если вы хотите его настроить, его легко интегрировать в WordPress. http://detectmobilebrowsers.mobi/

Стоит отметить, что большинство пользователей iPhone, Android или мобильных телефонов с нативными браузерами не хотят автоматического перенаправления!

Это плохая практика — дайте им возможность перехода на мобильную версию через ссылку, а в мобильной версии предоставьте возможность вернуться на основную версию сайта.

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

• Хотел добавить: простой способ оценить важность этого — посмотреть логи вашего сервера.

Я добавлю альтернативный подход.

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

Недавно мне потребовалось: для IE9 одно, для iPhone — другое, для iPad — третье и так далее... И я использовал класс Browser.php Криса Шульда с отличными результатами.

Функция, которую я создал, и примеры использования:

require_once('Browser.php');
$browser_check = new Browser();
$browser_agent = $browser_check->getBrowser();
$browser_version = $browser_check->getVersion();

function browser_check($what) {
    global $browser_agent, $browser_version;
    switch ($what) {
        case 'version':
            return $browser_version;
        break;
        case 'ie':
            if ($browser_agent==Browser::BROWSER_IE) return true;
            else return false;
        break;
        case 'mobile':
            if ($browser_agent==Browser::BROWSER_ANDROID || $browser_agent==Browser::BROWSER_IPOD || $browser_agent==Browser::BROWSER_IPHONE) return true;
            else return false;          
        break;
        case 'ipad':
            if ($browser_agent==Browser::BROWSER_IPAD) return true;
            else return false;          
        break;
        default:
            return false;
        break;
    }
}

echo "Версия браузера: " . browser_check('version');

if ( browser_check('ie') ) echo "Используется Internet Explorer - подключить правильный CSS";

if ( browser_check('mobile') ) echo "Используется iPhone, iPod или Android - подключить правильный JAVASCRIPT";

if ( browser_check('ipad') ) echo "Используется iPad - подключить правильный PHP";