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

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

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

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

31 голос | спросил Drake 10 32010vEurope/Moscow11bEurope/MoscowWed, 10 Nov 2010 16:23:26 +0300 2010, 16:23:26

6 ответов


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. Я не писал этот код.

ответил EAMann 10 32010vEurope/Moscow11bEurope/MoscowWed, 10 Nov 2010 18:40:11 +0300 2010, 18:40:11
8

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

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

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

ответил Jan Fabry 10 32010vEurope/Moscow11bEurope/MoscowWed, 10 Nov 2010 17:03:55 +0300 2010, 17:03:55
7

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

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

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

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

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

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

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

ответил Denis de Bernardy 10 32010vEurope/Moscow11bEurope/MoscowWed, 10 Nov 2010 19:02:00 +0300 2010, 19:02:00
3

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

Update

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

ответил kaiser 26 MaramMon, 26 Mar 2012 03:00:14 +04002012-03-26T03:00:14+04:0003 2012, 03:00:14
2

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

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

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

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

  • Требуется добавить, один простой способ рассказать, насколько это важно, через журналы вашего сервера.
ответил Wyck 10 32010vEurope/Moscow11bEurope/MoscowWed, 10 Nov 2010 18:12:41 +0300 2010, 18:12:41
1

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

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

Недавно мне пришлось: если IE9 - одно, если iPhone - второй, если iPad - третий, и так далее ... И использовал Chris Schuld 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";
ответил brasofilo 26 MaramMon, 26 Mar 2012 07:59:24 +04002012-03-26T07:59:24+04:0007 2012, 07:59:24

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132