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


31

Я хотел бы создать новую модифицированную версию моей темы (при необходимости проверьте свой профиль), чтобы представлять ее посетителям, если я обнаружу, что они посещают сайт с портативного устройства, такого как iPhone, Android и т. Д.

  1. Как определить, поступил ли запрос с мобильного устройства / браузера?
  2. Как я могу загрузить и представить им отдельную тему?

Больше информации : моя тема не плавная. Он имеет фиксированную ширину около 976 пикселей (содержимое 676 пикселей + остальное на левой боковой панели). Я не хочу революционизировать тему, но я чувствую, что она велика для телефонов 320x480 и 800x480. Возможно, я уберу боковую панель или, по крайней мере, переместу ее вправо и сделаю другие небольшие корректировки.

Ответы:


19

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

Поэтому я взглянул на код, чтобы найти соответствующие части, которые вам понадобятся для репликации определения мобильного браузера. Во-первых, как упоминал Ян Фабри, это список пользовательских агентов мобильного браузера. WPTouch включает в себя список по умолчанию, но также позволяет добавлять пользовательские агенты с настройкой или с фильтром 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",                             // Other iPhone browser
        "webmate",                               // Other iPhone browser
        "s8000",                                 // Samsung Dolphin browser
        "bada"                                   // Samsung Dolphin browser
    );

    $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 );

    // WPtouch User Agent Filter
    $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ловушку для обнаружения пользовательского агента мобильного браузера и устанавливает $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;
        }       
    }
}

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

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 по умолчанию в зависимости от того, есть ли в используемом браузере пользовательский агент, который соответствует вашему списку «мобильных браузеров».

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

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


Это список UA по умолчанию? Нет Opera Mini или Opera Mobile? Странный.
fuxia

Это список UA прямо из исходного кода ... но помните, однако, что WPTouch 2.0 - это премиальный плагин, который вы должны приобрести у BraveNewCode . Я еще не посмотрел на источник для этого, поэтому он может иметь обновленный список UA.
EAMann

8

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

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

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


7

Не рискуя ответить на вопрос, я бы посоветовал не делать этого.

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

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

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

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

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

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


Спасибо вам за предложения. Мой сайт не плавный, но имеет фиксированную ширину около 976 пикселей (содержание 676 пикселей + остальное на левой боковой панели). Я не хочу революционизировать тему, но чувствую, что это ширина для телефонов 320x480 и 800x480. Вероятно, я уберу боковую панель или, по крайней мере, переместу ее вправо.
Дрейк

Я согласен на 100%, из того, что я видел. За очень немногими исключениями, «мобильные темы» - по крайней мере, плагины «мобильной темы» - отстой и более сложны в использовании, чем навигация по оригинальному сайту на мобильных устройствах. Хотя, если вы достаточно стараетесь создать мобильную версию своего сайта, подумайте о ней как о полном редизайне, а не просто о настройке таблицы стилей.
золотые яблоки

3

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

Обновить

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


2

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

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

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

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

  • Хотелось добавить, один простой способ сказать, насколько это важно, - через логи вашего сервера.

Хорошее наблюдение, чтобы предложить варианты переключения на обеих версиях. Иногда вы используете не мобильный браузер, но используете медленное соединение (через сотовый модем, плохой Wi-Fi, dialup, ...) и предпочитаете мобильную версию, потому что она (в общем) также меньше.
Ян Фабри

2

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

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

Недавно мне пришлось: если 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 Version: " . browser_check('version');

if ( browser_check('ie') ) echo "Using Internet Explorer - print proper CSS";

if ( browser_check('mobile') ) echo "Using iPhone, iPod or Android - print proper JAVASCRIPT";

if ( browser_check('ipad') ) echo "Using iPad - print proper PHP";
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.