Kuinka tunnistaa osumia mobiililaitteista verkkosivuilla

Ohjaa mobiililaitteita mobiilisisällölle tai malleille

Jo vuosia asiantuntijat ovat sanoneet, että mobiililaitteiden kävijöille suunnattu liikenne on lisääntynyt dramaattisesti. Tästä syystä monet yritykset ovat älykkäästi alkaneet omaksua mobiilistrategian online-läsnäolostaan, luomalla kokemuksia, jotka sopivat puhelimeen ja muihin mobiililaitteisiin.

Kun olet viettänyt aikaa oppimalla verkkosivujen suunnittelemista matkapuhelimille ja toteuttamaan strategianne, sinun on myös varmistettava, että sivustosi kävijät voivat nähdä nämä mallit. On monia tapoja, joilla voit tehdä tämän ja jotkut toimivat paremmin kuin toiset. Seuraavassa tarkastellaan menetelmää, jota voit käyttää mobiilisovelluksen toteuttamiseen verkkosivustoillesi - sekä suosituksen lähellä loppua siitä, mikä paras tapa saavuttaa tämä on nykypäivän Web!

Anna linkki toiseen sivustoon

Tämä on ylivoimaisesti helpoin tapa käsitellä matkapuhelimen käyttäjiä. Sen sijaan, että huolehtisivat siitä, näkevätkö ne tai eivät näe sivuja, voit laittaa linkin jonnekin sivun yläreunaan, joka osoittaa sivustosi erillisen mobiiliversion. Sitten lukijat voivat itse valita, haluavatko he nähdä mobiiliversion tai jatkaa "normaalia" versiota.

Tämän ratkaisun etuna on, että se on helppo toteuttaa. Se edellyttää, että voit luoda optimoidun version mobiililaitteille ja lisätä sitten linkin jonnekin tavallisten sivujen yläosaan.

Haitat ovat:

Viime kädessä tämä lähestymistapa on vanhentunut, joka ei todennäköisesti ole osa nykyaikaista mobiilistrategiaa. Sitä käytetään joskus pysähtymisrajoituksena, kun taas parempaa ratkaisua kehitetään, mutta se on oikeastaan ​​lyhytaikaista kaistalevyä tässä vaiheessa.

Käytä JavaScript

Edellä mainitun lähestymistavan muunnelmassa jotkut kehittäjät käyttävät tietyntyyppistä selaimen tunnistuskäsikirjoitusta havaitsemaan, onko asiakas mobiililaitteessa ja sitten ohjata heidät kyseiseen erilliseen mobiilisivustoon. Selaimen havaitsemisen ja mobiililaitteiden ongelma on, että siellä on tuhansia mobiililaitteita. Jotta yritä havaita heidät kaikki yhdellä JavaScript-ohjelmalla, he voivat kääntää kaikki sivusi lataamattomaksi painajaisiksi - ja sinulla on yhä monia samanlaisia ​​haittoja kuin edellä mainittu lähestymistapa.

Käytä CSS & # 64 media-kämmenlaitetta

CSS-komento @media-kämmentietokone näyttää olevan ihanteellinen tapa näyttää CSS-tyylejä vain kannettaville laitteille - kuten matkapuhelimille. Tämä tuntuu ihanteelliselta ratkaisulle mobiililaitteiden sivujen näyttämiseen. Voit kirjoittaa yhden verkkosivun ja luoda kaksi tyyliarkkia. Ensimmäinen "näytön" mediatyyppistä tyylejä sivusi monitoreille ja tietokoneen näytöille. Toinen "kädessä pidettävien" tyylejä sivusi pienille laitteille, kuten kyseisille matkapuhelimille. Kuulostaa helposti, mutta se ei todellakaan toimi käytännössä.

Suurin etu tässä menetelmässä on, että sinun ei tarvitse säilyttää kahta versiota verkkosivustollasi. Sinä vain säilytetään yksi, ja tyyliarkki määrittää, miltä se näyttää - mikä on itse asiassa lähemmäksi haluamamme loppuratkaisua.

Ongelma tässä menetelmässä on se, että monet puhelimet eivät tue kämmenlaitteen tyyppiä - ne näyttävät sivunsa näyttösovelluksella. Ja monet vanhemmat matkapuhelimet ja kämmenlaitteet eivät tue lainkaan CSS: tä. Lopulta tämä menetelmä on epäluotettava ja siksi sitä käytetään harvoin verkkosivuston mobiiliversioiden toimittamiseen.

Käytä PHP: n, JSP: n ja ASP: n tunnistamaan käyttäjäagentti

Tämä on paljon parempi tapa ohjata mobiilikäyttäjiä sivuston mobiiliversioon, koska se ei tue skriptikieliä tai CSS: tä, jota mobiililaite ei käytä. Sen sijaan se käyttää palvelinpuolen kieltä (PHP, ASP, JSP, ColdFusion jne.) Tarkastelemaan käyttäjäagenttiä ja sitten muuttamaan HTTP-pyynnön osoittamaan mobiilisivulle, jos se on mobiililaite.

Yksinkertainen PHP-koodi tämän tekemiseksi näyttäisi näin:

stristr ($ ua, "Windows CE") tai
stristr ($ ua, "AvantGo") tai
stristr ($ ua, "Mazingo") tai
stristr ($ ua, "Mobile") tai
stristr ($ ua, "T68") tai
stristr ($ ua, "Syncalot") tai
stristr ($ ua, "Blazer")) {
$ DEVICE_TYPE = "MOBILE";
}
jos (isset ($ DEVICE_TYPE) ja $ DEVICE_TYPE == "MOBILE") {
$ location = 'mobiili / index.php';
otsikko ('Paikkakunta:'. $ sijainti);
exit;
}
?>

Ongelmana tässä on se, että on olemassa paljon ja paljon muita potentiaalisia käyttäjäagentteja, joita mobiililaitteet käyttävät. Tämä käsikirja saa kiinni ja ohjaa paljon heistä, mutta ei missään muodossa. Ja lisää lisätään koko ajan.

Lisäksi, kuten muiden edellä mainittujen ratkaisujen kanssa, sinun on edelleen ylläpidettävä erillinen mobiilisivusto näille lukijoille! Tämä haittapuoli hallita kahta (tai useampaa!) Verkkosivustoa on riittävä syy etsiä parempaa ratkaisua.

Käytä WURFL

Jos päätät edelleen ohjata mobiilikäyttäjiä erilliseen sivustoon, WURFL (Wireless Universal Resource File) on hyvä ratkaisu. Tämä on XML-tiedosto (ja nyt DB-tiedosto) ja erilaisia ​​DBI-kirjastoja, jotka sisältävät paitsi ajan tasalla olevia langattomia käyttäjäagentti -tietoja, mutta myös ne ominaisuudet ja ominaisuudet, joita käyttäjäagentit tukevat.

WURFLin käyttämiseksi voit ladata XML-määritystiedoston ja valita sitten kielen ja toteuttaa API verkkosivustollasi. On työkaluja WURFL: n käyttämiseen Java-, PHP-, Perl-, Ruby-, Python-, Net-, XSLT- ja C ++ -ohjelmilla.

WURFL-sovelluksen hyödyksi on se, että paljon ihmisiä päivittää ja lisätään konfigurointitiedostoon koko ajan. Joten käytettävän tiedoston ollessa vanhentunut melkein ennen kuin olet ladannut sen, mahdollisuudet ovat, että jos lataat sen kerran kuukaudessa tai niin, sinulla on kaikki sellaiset mobiiliselaimet, joita lukijat käyttävät tavallisesti ilman mitään ongelmia. Tietenkin haittapuolena on, että sinun on jatkuvasti ladattava ja päivitettävä tämä - kaikki, jotta voit ohjata käyttäjiä toiseen sivustoon ja luoda haitat.

Paras ratkaisu on reagoiva muotoilu

Joten jos eri laitteiden ylläpito eri laitteissa ei ole vastaus, mikä on? Responsive web design .

Responsive design on silloin, kun käytät CSS-mediakyselyjä eri tyylisuureiden laitteiden tyylien määrittämiseen. Responsive-suunnittelun avulla voit luoda yhden verkkosivun sekä mobiililaitteille että muille kuin mobiilikäyttäjille. Silloin sinun ei tarvitse huolehtia siitä, mitä sisältöä näytetään mobiilisivustolla tai muista siirtää uusimmat muutokset mobiilisivustoosi. Lisäksi, kun olet kirjoittanut CSS: n, sinun ei tarvitse ladata mitään uutta.

Reagoiva muotoilu ei välttämättä toimi täydellisesti äärimmäisen vanhojen laitteiden ja selainten (joista suurin osa on hyvin pienissä käytössä nykyään ja ei pitäisi olla paljon huolestuttavaa), mutta koska se on lisäainetta (lisäät tyylejä sisältöön sen sijaan, että otettaisiin sisältöä pois) nämä lukijat voivat edelleen lukea verkkosivustoasi, se ei vain näytä ihanteellisilta vanhalta laitteelta tai selaimelta.