Samsung Galaxy Grand Prime -laitteen piilotetut ominaisuudet, joista et tiedä

Huomasin, että tietyillä verkkosivustoilla on erilainen "ulkonäkö / ulkoasu", kun ne tunnistavat matkapuhelimen käytön. Kuinka he tekevät tämän (mieluiten CSS-, JS- ja / tai HTML-kontekstissa)?

Yleensä on kaksi mahdollisuutta:

  1. näytön leveyden tunnistaminen
  2. laitteen tunnistaminen

Mediakyselyt

Ensimmäisessä tapauksessa se toimii kuten mittaamalla nykyinen näytön leveys (tai muut parametrit, kuten korkeus, suunta jne.) Ja tarjoamalla tyylitaulukoita ja muita resursseja, kuten javascriptejä ja kuvia erityisesti tälle leveydelle. Yksinkertaisin tapaus on kolme ns. Katkaisupistettä, kuten jotain 1024 kuvapistettä (työpöytä), jotain noin 700 kuvapistettä (tabletti), jotain noin 300 kuvapistettä (mobiili).

Tyypillinen CSS-mediakysely voi näyttää tältä:

@media only screen and (max-width: 500px) { body { background-color: lightblue; } } 

Mediakysely voi toteuttaa paitsi säännön myös tiedoston, kuten:

<link media='screen' href='/path/to/global.css' type='text/css' rel='stylesheet'/> <link media='only screen and (max-width: 320px)' href='/path/to/touch.css' type='text/css' rel='stylesheet'/> <link media='only screen and (max-width: 1024px)' href='/path/to/tablet.css' type='text/css' rel='stylesheet'/> <link media='handheld' href='/path/to/mobile.css' type='text/css' rel='stylesheet'/> 

tai

<link rel='stylesheet' media='all' href='cssbase.css' /> <link rel='stylesheet' media='(min-width: 672px)' href='csswide.css' /> <link rel='stylesheet' media='(orientation:landscape)' href='landscape.css'> 

Sama javascriptin tekemä mediakysely voi näyttää tältä:

if (screen.width >= 600) { // download complicated script // swap in full-source images for low-source ones } 

Laitteen tunnistus

Toisessa tapauksessa eri sivustoversiot (pöytätietokone, tabletti, mobiili) tarjotaan käyttäjäagentin tunnistamisen jälkeen, ja ne sisältävät selaimen pyyntöotsikossa. Tyypillinen työpöydän käyttäjäagentti näyttää

User-Agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 

Laitteen tunnistaminen javascriptillä voi tapahtua kuten:

if (navigator.userAgent.match(/iPad/i) != null){ css.href = '/c/dropkick.css'; var h = document.getElementsByTagName('head')[0]; h.appendChild(css); } 

tai, php: n kanssa, kuten:

<?php if(strstr($_SERVER['HTTP_USER_AGENT'], 'Chrome')) { Kromi }  ?> var13 ->

Tällöin mitä suurempi käyttäjäagenttien luettelo on tarkistettu, se voi tunnistaa käyttäjäagentin. Tämä tosiasia pakottaa ylläpitämään pitkiä käyttäjäagenttiluetteloita tai pääsyn kolmansien osapuolten luetteloihin ja / tai kirjastoihin, kuten mobile-Detect.js.

Toinen asia: käyttäjäagenttien tunnistamisen pitäisi tapahtua paremmin palvelinpuolella - jos käyttäjäpuolella, se epäonnistuu, jos javascripit eivät ole käytössä.

yksityinen mielipide :)

Mielestäni ensimmäinen mahdollisuus toimii toisenlaisena, koska erityisesti työpöydällä ja tablet-laitteilla käyttäjä voi muuttaa näytön leveyttä manuaalisesti.

Laitetunnistuksella on kuitenkin oikeus olemassa: eräänlaisella laitteen tunnistuksella, kuten laitteen pikselisuhteella, voidaan tunnistaa, pitäisikö sivuston näyttää verkkokalvolle valmiita kuvia.

  • On aina parempi käyttää yhtä CSS-tiedostoa: esim <link rel='stylesheet' href='style.css' type='text/css' media='all' /> ja jos haluat ylellisyyttä helpottaa hallinnointia useilla tiedostoilla, käytä sitten SASS.
  • @SimonHayter En ole samaa mieltä siitä, että on "aina parempi käyttää yhtä CSS-tiedostoa" - vaikka tässä tapauksessa on totta, että mediahakuja voidaan todennäköisesti paremmin hallita SASS: n ja koontimenettelyn kautta, siirtymällä kohti HTTP / 2: ta se saattaa on parempi palvella useita pienempiä tiedostoja, koska yhteyden yleiskustannukset vähenevät ja rinnakkaisia ​​pyyntöjä voidaan käsitellä.
  • @ Zhaph-BenDuguid ~ En tiedä mikä tilanne tekisi CSS: stä koskaan sopivamman useissa tiedostoissa, kuten tässä vastauksessa osoitetaan. Ainoa kerta, kun olisin samaa mieltä, on käyttää ulkoisia CSS-tiedostoja, kuten mahtavia fontteja ja Google-fontteja, koska ne tallennetaan välimuistiin useimpien ihmisten koneisiin ennen kuin he edes vierailevat sivustollasi. Joten ellei sivustossasi ole massiivisia CSS-tiedostoja, jotka ylittävät välimuistikynnyksen joillakin vanhemmilla laitteilla, en näe järkeä. Vähemmän pyyntöjä on parempi kävijälle ja palvelimelle riippumatta HTTP / 2: sta.
  • Jep, joko melko vanhoille, suurille CSS-tiedostoille, tai siirrytään modulaarisempaan arkkitehtuuriin, jossa haluat vain tarjota osuvaa sisältöä käyttäjillesi. Valitettavasti joissakin suuremmissa sivustoissa, joissa olen työskennellyt, voi olla yli 70% "käyttämätöntä" CSS: ää mille tahansa sivulle :(
  • 1 @Evgeniy, luulisi, että se toimisi tällä tavalla, mutta valitettavasti ei. Selaimet lataavat kaikki laskentataulukot riippumatta, koska laitteet voivat muuttaa tarkkuutta ja suuntaa, joten he lataavat ne sivun ensimmäisten latausten yhteydessä. Joten kaikki, mitä teet, on tehdä tarpeettomia palvelinpuolen pyyntöjä.

Käyttämällä näkymän sisällönkuvauskenttää HTML-koodissa ja mediakyselyissä CSS: ssä. Näiden avainsanojen etsiminen tuo esiin monia hyödyllisiä opetusohjelmia.

  • 1 Tämä ei ole korkealaatuinen vastaus. On paljon hyödyllisempää kirjoittaa tähän muutama kappale kuin ehdottaa, että käyttäjät etsivät vastauksia.
  • Olen jo antanut vastauksen. Sinun ei tarvitse kirjoittaa muutama kohta jostakin niin yksinkertaisesta.
  • Jopa yksinkertaiset kysymykset ansaitsevat täydelliset vastaukset. Hyvät vastaukset sisältävät tarpeeksi tietoa, jotta käyttäjien ei tarvitse etsiä muualta. Hyviin vastauksiin sisältyy viitteitä, kuten linkkejä arvovaltaisiin lähteisiin. Muokkaa vastaustasi laajentaaksesi sitä.

työskennellyt sinulle: Charles Robertson | Haluatko yhteyttä?