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

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

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

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

Solutions Collecting From Web of "Как обнаружить мобильные устройства и представить им конкретную тему?"

Как и большинство других, я настоятельно рекомендую использовать 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 hook для обнаружения пользовательского агента мобильного браузера и устанавливает $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. Я не писал этот код.

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

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

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

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

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

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

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

  • 1024×768 (iPad пейзаж)
  • 768×1024 (портрет iPad)
  • 800×600 (пользователи с плохим зрением)
  • 480×320 (iPhone пейзаж)
  • 320×480 (портрет iPhone, с автоматическим увеличением)

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

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

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

Обновить

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

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

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

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

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

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

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

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

Недавно мне пришлось: если 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";