Comment un site Web reconnaît-il un téléphone intelligent?
J'ai remarqué que certains sites Web ont une "apparence/mise en page" différente lorsqu'ils reconnaissent qu'un téléphone portable est utilisé. Comment font-ils cela (de préférence dans un contexte CSS, JS et/ou HTML)?
En général, il y a deux possibilités:
- reconnaissance de la largeur d'affichage
- reconnaissance de l'appareil
Requêtes avec les médias
Dans le premier cas, cela fonctionne comme mesurer la largeur d'affichage actuelle (ou d'autres paramètres, tels que la hauteur, l'orientation, etc.) et servir des feuilles de style et d'autres éléments, tels que des javascripts et des images spécialement pour cette largeur. Le cas le plus simple est constitué de trois points de rupture appelés, comme quelque chose d’environ 1024px (ordinateur de bureau), environ 700 pixels (tablette), environ 300 pixels (mobile).
Une requête média CSS typique pourrait ressembler à:
@media only screen and (max-width: 500px) { body { background-color: lightblue; } }
La requête multimédia peut implémenter non seulement une règle, mais également un fichier, tel que:
<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"/>
ou
<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">
La même requête multimédia effectuée par javascript pourrait ressembler à:
if (screen.width >= 600) { // download complicated script // swap in full-source images for low-source ones }
Reconnaissance de l'appareil
Dans le second cas, différentes versions du site (bureau, tablette, mobile) sont servies après la reconnaissance de l'agent utilisateur, contenant dans l'en-tête de la requête du navigateur. L'agent utilisateur de bureau typique ressemble à
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
La reconnaissance de périphérique avec javascript pourrait se produire de la manière suivante:
if (navigator.userAgent.match(/iPad/i) != null){ css.href = "/c/dropkick.css"; var h = document.getElementsByTagName('head')[0]; h.appendChild(css); }
ou, avec php, comme:
<?php if(strstr($_SERVER['HTTP_USER_AGENT'], 'Chrome')) { ?> Chrome <?php } ?>
Dans ce cas, plus la liste des agents d’utilisateur est longue, plus l’exemple peut être reconnu. Cela oblige à conserver de longues listes d’agents utilisateurs ou à accéder à des listes et/ou bibliothèques tierces, comme mobile-detect.js .
Un autre point: la reconnaissance de l'agent utilisateur devrait mieux se produire côté serveur - si côté utilisateur, cela échouera si les javascripts sont désactivés.
opinion privée:)
À mon avis, la première possibilité fonctionne exactement comme la seconde, car, en particulier sur les ordinateurs de bureau et les tablettes, l'utilisateur peut modifier manuellement la largeur d'affichage.
Mais la reconnaissance d'appareil a le droit d'exister: avec une sorte de reconnaissance d'appareil, telle que rapport de pixels de l'appareil , on peut reconnaître si le site doit servir des images prêtes pour la rétine.