Mobil cihazlar nasıl tespit edilir ve onlara belirli bir tema sunulur?


31

Siteyi iPhone, Android, vb. Gibi elde tutulan bir cihazdan ziyaret ettiklerini tespit edersem ziyaretçilerime sunmak için temamın yeni bir modifiye edilmiş versiyonunu oluşturmak istiyorum (gerekirse profilimi kontrol et).

  1. İsteğin bir mobil cihazdan / tarayıcıdan gelip gelmediğini nasıl belirleyebilirim?
  2. Onlara özel bir temayı nasıl yükleyebilir ve sunabilirim?

Daha Fazla Bilgi : Temam akışkan değil. Yaklaşık 976px sabit bir genişliğe sahiptir (676px içerik + geri kalan sol kenar çubuğudur). Temada devrim yapmak istemiyorum ama bunun 320x480 ve 800x480 telefonları için büyük olduğunu düşünüyorum. Muhtemelen kenar çubuğunu kaldıracağım ya da en azından sağa doğru hareket ettireceğim ve diğer küçük ayarları yapacağım.

Yanıtlar:


19

Diğerleri gibi WPTouch kullanmanızı şiddetle tavsiye ederim. Bununla birlikte, blogları diğer web sitesi formatlarından daha fazla destekleyecek şekilde oluşturulmuştur, bu yüzden mobil çözümlerin her derde deva olmadığını biliyorum (portföyümü WordPress'te ve ****blogumda kullanıyorum ve portföyüm WPTouch'ta görünüyor ).

Bu yüzden, mobil tarayıcı algılamayı çoğaltmak için kullanmanız gereken ilgili bölümleri bulmak için koda bir göz attım. İlk olarak, Jan Fabry tarafından belirtildiği gibi, mobil tarayıcı kullanıcı aracıları listesidir. WPTouch varsayılan bir liste içerir, ancak aynı zamanda bir ayara veya denilen bir filtreye sahip özel kullanıcı aracıları eklemenizi sağlar 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;
}

Eklentinin eti olsa da, bir sınıftır:

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

    ...

Eklentinin yapıcısı ( function WPtouchPlugin()), önce plugins_loadedmobil tarayıcının kullanıcı aracısını tespit etmek ve $applemobiledoğru olarak ayarlamak için kancaya bir eylem ekler . İşte özel fonksiyon:

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;
        }       
    }
}

Artık eklenti bir mobil tarayıcı kullandığınızı biliyor (tarayıcının kullanıcı aracısına göre). Eklentinin bir sonraki etli kısmı bir dizi filtredir:

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') );       
}

Bu filtrelerin her biri, $applemobletrue olarak ayarlanıp ayarlanmadığını kontrol eden bir yöntem çağırır . Öyleyse, WordPress, mobil stil sayfanızı, mobil temanızı ve temanız için varsayılan olanların yerine mobil bir yazı / sayfa şablonunu kullanır. Temel olarak, kullanılmakta olan tarayıcının "mobil tarayıcılar" listenizle eşleşen bir kullanıcı aracısı olup olmamasına bağlı olarak WordPress'in varsayılan davranışını geçersiz kılıyorsunuz.

WPTouch ayrıca mobil temayı kapatma yeteneğine de sahiptir - bir iPhone'daki bir WPTouch sitesini ziyaret ettiğinizde, en altta siteyi normal şekilde görüntülemenizi sağlayan bir düğme bulunur. Bunu kendi çözümünüzü oluştururken düşünmek isteyebilirsiniz.

Feragatname: Yukarıdaki kodun tümü WPTouch sürüm 1.9.19.4 için kaynaktan kopyalandı ve GPL kapsamında korunuyor. Kodu tekrar kullanırsanız, sisteminizin de GPL şartlarına uyması gerekir. Bu kodu ben yazmadım.


Bu varsayılan UA listesi mi? Opera Mini veya Opera Mobile yok mu? Garip.
fuxia

Bu doğrudan kaynak kodunun dışındaki UA listesi ... sadece unutmayın, ancak WPTouch 2.0'ın BraveNewCode'dan satın almanız gereken premium bir eklenti olduğunu unutmayın . Bunun için kaynağa henüz bakmadım, bu yüzden güncellenmiş bir UA listesine sahip olabilir.
EAMann

8

Çok popüler WPtouch eklentisinin bunu nasıl yaptığını görmek isteyebilirsiniz . "İPhone, iPod touch, Android, Opera Mini, Palm Pre, Samsung touch ve BlackBerry Storm / Torch mobil cihazlar" için farklı bir tema sunuyor . Kaynak kodlarında bir kullanıcı aracısı listesi görüyorum , muhtemelen anahtar budur.

Diğer bir eklenti olan WP-Wurfled , geniş Kablosuz Evrensel Kaynak Dosyası veritabanını kullanır. Bu sürekli güncellenen mobil cihaz veritabanı aynı zamanda pek çok yetenek bilgisi içeriyor. Bu nedenle, cihazın Flash tarafından desteklenip desteklenmediğini sunucu tarafında biliyorsunuz ...

template_redirectEylem kanca genellikle dahildir gerçek şablon dosyasında önceki son an neredeyse olduğu gibi, özel temalar yüklemek için kullanılan (bir template_includeson kanca, fakat bu bir filtre bulunuyor).


7

Soruyu cevaplamama riskiyle, bunu yapmamanızı tavsiye ederim.

Aylardır iOS cihazları kullanıyorum ve iPad'imi alırken ilk yaptığım şeylerden biri, kullanılan cihaza göre (ve aslında ekran yönelimini temel alarak davranışını değiştiren CSS mizanpajı) bulmaya çalışmaktı. ).

Yazma sırasında, dev sitemde çalışıyor (http://dev.semiologic.com/). Bir iOS cihazında test ederseniz, mizanpajın, iPad'de kenar çubukları olan bir sütundan, iPhone'u temel alan tek bir sütuna sahip bir sütuna geçtiğini unutmayın. (Kenar çubukları iki sütun halinde yerleştirilir ve alt kutular altta iki sütunla yerleştirilir.) Tarayıcının genişliğini azaltarak efekti Safari kullanarak yeniden oluşturabilirsiniz.

Her neyse, programlandığı kadar eğlenceli, sonunda, en azından iOS cihazlarında, mobil olarak optimize edilmiş düzenin işleri daha da kötüleştirdiği ortaya çıktı. Safari mobile'ın yerleşik yakınlaştırması, ana sütununuz 480 piksel genişliğinde olduğu sürece, sitenizin mobil kullanım için zaten optimize edilmiş olmasıdır. 720px genişliğinde bir düzen için 240px genişliğinde bir kenar çubuğu ekleyin; siteniz de çok iyi uyuyor ve harika görünüyor:

  • 1024x768 (iPad manzarası)
  • 768x1024 (iPad portre)
  • 800x600 (görme zayıflığı olan kullanıcılar)
  • 480x320 (iPhone manzarası)
  • 320x480 (Otomatik odaklanma özelliği ile iPhone portresi)

500px + 250px, toplamda 750 piksel olan bir şeye sahip olmayı tercih ediyorsanız, Safari cep telefonunun yerleşik yakınlaştırmasını hesaba katarsanız da çalışır. Site hala iyi görünecek ve hem manzara hem de portre modlarında iPhone'larda mükemmel bir şekilde okunabilecek.

Her halükarda, sorunuza geri döndüğünüzde, testler yapmamanız gereken tek şeyin esnek bir genişliğe sahip bir düzen kullanmak olduğunu ortaya koydu. (Bu arada, WP-touch, yanlış yaptığım sürece tam olarak bunu yapacak.) Bunu yapmak, alt-optimal zoom işlemine yol açar. İPad'de, daha büyük bir metin boyutu elde etmek için 480 piksel genişliğindeki bir sütunda sınırlandırılmış bir şeyi yakınlaştırabilirsiniz; Ekranınızın genişliğine "ayarlanan" bir şey, sizi rahatça okuyamayacak kadar küçükse küçük metin veya yatay kaydırma yapmaya zorlar ...


Önerileriniz için teşekkür ederim. Sitem akışkan değil, ancak yaklaşık 976px sabit bir genişliğe sahip (676px içerik + dinlenme sol kenar çubuğudur). Temada devrim yapmak istemiyorum ama bunun 320x480 ve 800x480 telefonları için geniş olduğunu düşünüyorum. Muhtemelen kenar çubuğunu kaldıracağım ya da en azından sağa taşıyacağım.
Drake

Gördüklerimden% 100 katılıyorum. Çok az istisna dışında, "mobil temalar" - en azından, orada "mobil tema" eklentileri var - emmek ve orijinal siteyi mobil cihazlarda gezinmekten daha zor. Sitenizin mobil sürümünü denemek ve oluşturmak için yeterince özen gösterseniz de, bunu bir stil sayfası düzenlemesinden ziyade tam bir yeniden tasarım olarak düşünün.
goldenapples 11:10

3

Basit: wp_is_mobile()Test etmek için kullanın - tüm mobil cihazlar (akıllı telefonlar, tabletler vb.) trueİçin tetiklenir .

Güncelleştirme

Lütfen bunu yapma. Güvenilir çalışmıyor.


2

Özelleştirmek istiyorsanız, bu gerçekten harika bir komut dosyasıdır, wordpress ile entegre etmek kolaydır. http://detectmobilebrowsers.mobi/

Unutulmaması gereken bir şey, çoğu iphone, andriod veya yerel tarayıcı desteğine sahip cep telefonları kullanıcılarının otomatik olarak yeniden yönlendirilmek istemedikleri!

Bu kötü bir uygulamadır, onlara bir mobil sürüme bağlantı yoluyla bir seçenek verin ve mobil sürümde onlara orijinal siteye geri dönme seçeneği verin.

Mobil kullanım için çok özel bir şey inşa ettiğiniz veya yerel tarayıcı desteği olmayan eski telefonlardan gelen trafik olmadıkça, kullanıcılarınızın otomatik olarak yönlendirilmemesini tekrar ediyorum.

  • Eklemek istedim, bunun sunucu günlüklerinizden bunun ne kadar önemli olduğunu söylemenin kolay bir yolu.

Her iki versiyonda da anahtar seçenekleri sunmak için iyi gözlem. Bazen mobil olmayan bir tarayıcıda ancak yavaş bir bağlantıdasınız (hücresel modem aracılığıyla, kötü Wifi, çevirmeli, ...) ve mobil olarak optimize edilmiş bir sürümü tercih ediyorsunuz (çünkü genel olarak).
Jan Fabry

2

Alternatif bir yaklaşım ekleyeceğim.

Belki de tüm stil ve davranışları çok özel ihtiyaçlara göre el işi yapmak ve incelemek istiyorsunuz.

Geçenlerde zorunda: if IE9 bir şey, iPhone ise ikinci bir, iPad üçüncü bir vb ... Ve Chris Schuld en kullanılırsa Browser.php harika sonuçlar ile sınıf.

Açtığım fonksiyon ve kullanım örnekleri:

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";
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.