Discussion :

[olivierdauxais]

Bonjour,

J'ai bien compris que je pouvais utiliser "$_SERVER['HTTP_USER_AGENT']" pour déterminer le type d'appareil qu'utilisent les visiteurs de mon site.

Seulement voilà, il y a tellement d'appareils différents que la liste peut vite s'avérer très longue et fastidieuse à mettre à jour dans mon script php.

Y a t'il un dénominateur commun (comme la lettre "m" par exemple) qui serait inscrite dans tous les utilisateurs de ce qu'on appelle les "mobile device"?

Ceci pourrait nous simplifier la vie lorsqu'il s'agit d'adapter un site aux visiteurs en "mobile".

Cordialement.

[sabotage]

Il y a des fous qui maintiennent des listes :
http://detectmobilebrowsers.com/

[olivierdauxais]

Merci Sabotage,

Je suis allé voir ton lien, ça a l'air excellent ce site qui propose même un exemple de code dans plusieurs langages.
Il me reste à essayer ça.

Et cela répond à ma question où visiblement il n'existe pas un dénominateur commun à tous les mobiles.
Peut-être serait-ce une idée de norme à mettre en place.

Un gros merci à ces "fous" qui maintiennent des listes.
Cela me simplifie la tâche et il ne me restera plus qu'à y retourner tous les 6 mois pour une mise à jour.

Encore merci.

[sabotage]

Chrome et Safari ont visiblement le mot "mobile" dans leur code agent.
Un alternative est de chercher l'OS dans l'user agent.

[tdutrion]

Bonjour,

Si je puis me permettre il existe un certain nombre de librairies sur Packagist qui encapsule ces fonctions... Ne réinventons pas la roue à chaque fois...
https://packagist.org/packages/mobil...obiledetectlib

Par contre, il vaut mieux se tourner vers un design responsive que vers une librairie de ce type : c'est beaucoup moins lourd et plus précis, et ça s'adapte aussi aux très grands écrans (avec l'arrivée de la QHD et UHD les sites qui s'affichent en tout petit au milieu de la page et qui sont super blindé c'est énervant...).

[olivierdauxais]

Merci Théocrite pour ton lien et tes infos.

J'ai jeté un œil à ton lien et je ne sais trop sur quel bouton appuyer sur ce site.
L'autre lien de sabotage est plus intuitif d'usage et fournit directement le code à écrire.

Que veux tu dire exactement par un "design responsive"?
Est-ce un logiciel?

A propos d'OS, peut on résumer pour faire simple à Android pour la plupart des mobiles?
Pour l'iphone, c'est quoi exactement?
Et l'ipad, c'est quoi?

[Tsilefy]

Pour avoir mobile detect, il faut faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

composer require mobiledetect/mobiledetectlib

. Ce n'est pas compliqué à faire. Si tu n'utilises pas encore Composer, il faudrait apprendre :-)

Et je suis d'accord avec Théocrite: ce genre de problème se traite avec CSS et pas PHP. Fais une recherche Google sur Responsive Design et Media Queries, et tu verras. C'est beaucoup plus souple, ton code s'adapte automatiquement aux nouveaux appareils (ce qui n'est pas le cas avec une solution en PHP), tu n'es pas obligé de créer deux versions de ton site. Par contre, il faut bien savoir utiliser CSS (mais c'est quand même beaucoup plus facile que PHP).

[tdutrion]

Pas de meilleure réponse que Tsilefy.

Juste, regarde les tutoriels que tu trouves sur le responsive design, puis si besoin tournes-toi vers des frameworks frontend : Twitter Bootstrap, Zorb Foundation, Google Material Design Lite...

[olivierdauxais]

Merci à vous deux pour votre réponse.
Juste pour planter le décor, je n'ai pas Internet chez moi. J'habite dans une cabane dans un arbre...
Sans fibre optique, connexion ADSL ou même du 3G. GPRS est tout ce que je peux avoir !!!
Et ce n'est donc pas si simple pour moi de surfer sur le net pour y glaner des informations.

En effet, je n'utilise pas et ne connais pas "composer"...
Si je comprends bien, cela fait appel à d'autres sites qui nous mâchent le boulot. Est-ce exact?
J'aime bien mon autonomie et savoir que mon site ne fait nullement appel à d'autres...
Histoire de réduire au minimum les problèmes qui seraient liés à des problèmes de connexion.
Mais, j'irai voir un jour.

Voilà ce que j'envisageais:
Après détection du "user agent", je pensais écrire un bout de script php du genre:
If mobile detected, then link to "mobile.css"; Else, then link to "normal.css".
Et me servir donc de deux pages css différentes.

Voulez-vous dire qu'une page css par elle-même peut détecter un visiteur en mobile ou "normal"?
Si, oui, auriez-vous un exemple de code css pour illustrer la chose?

[Tsilefy]

Justement, le but n'est pas de détecter un "mobile", car on ne peut pas se tenir au courant de tous les nouveaux mobiles qui existent, et deux mobiles différents avec le même navigateur peuvent avoir deux rendus différents parce qu'ils ont des "résolutions" différentes. Il faut donc adapter le style en fonction de chaque type de résolution, comme ça ton site marchera quel que soit l'appareil, le navigateur, le système d'exploitation etc..

En CSS, on utilise les media queries pour ça. Il existe différentes techniques pour le faire, et ce fil n'est vraiment pas la place pour un tutoriel sur ça.
En gros, tu as deux approches:
- l'approche lourde: tu sers au visiteur un fichier CSS différent selon la résolution de l'écran
- l'approche plus souple, plus maniable et évolutive, mais plus compliquée à mettre en place: tu écris un style pour mobile/petits écrans en premier (approche dite mobile-first), puis selon les résolutions, tu ajoute des styles qui modifient la page pour des résolutions de plus en plus grande. Tu peux aussi choisir l'approche inverse (desktop first): le style pour les grands écrans en premier, puis tu ajoutes des styles qui modifient la page pour des résolutions de plus en plus petites.

Exemple, dans un fichier css unique mais tu peux aussi utiliser des fichiers séparés en mettant les media queries dans une balise <link>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//style.css
 
//code pour mobiles en mode portrait - on a un div auto centré d'une taille de 260px
div { 
  width: 260px;
  margin: 0 auto;
}
 
//et maintenant, pour les tabletttes en mode portrait ou les mobiles en mode paysage: je double la taille du div
//remarque comment on peut automatiquement changer le style entre mode portrait et paysage, ce qui est impossible avec un détection par user-agent.
@media only screen and (min-width: 768px) {
  div {
     width: 520px;
  }
}
 
//ordinateurs et tablettes en mode paysage. J'augmente encore la taille du div.
@media only screen and (min-width: 1140px) {
  div {
     width: 780px;
  }
 
}

Pour le reste, vois les deux liens que je t'ai donnés :-)

[olivierdauxais]

Merci Tsilefy pour ta réponse.

J'ai jeté un œil à tes 2 liens mais je ne vois pas de différence entre les 2 liens. Il semble que ce soit le même.

OK, ça a l'air super cool et bien mieux que de se casser la tête à identifier l'user agent.
Je vais donc baser mon design sur la résolution d'écran du visiteur.

Il va falloir que je revois ça plus en détail mais je vais m'orienter vers media query en css3.

Donc si j'ai bien compris, il me suffit juste d'écrire un truc du genre dans le head de ma page html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<link rel="stylesheet" media="screen and (max-width: 800px)" href="mobile.css" type="text/css" />
<link rel="stylesheet" media="screen and (min-width: 800px)" href="normal.css" type="text/css" />

Et ensuite de simplement editer mon fichier "mobile.css" et "normal.css" qui y correspondent.

Est-ce aussi simple?

As-tu une idée des largeurs les plus classiques rencontrées? 480px, 640px, 1024px ...???

[Tsilefy]

Et oui, c'est aussi simple! Pas la peine de se prendre la tête avec l'user-agent, il suffit de ces 2 lignes!

Je t'ai donné les dimensions que j'utilise dans l'exemple:
- mobile par défaut
- si tu veux cibler plus précisément les mobiles:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

@media only screen and (min-width: 480px)

- tablettes en portrait et mobiles en paysage:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

@media only screen and (min-width: 768px)

- ordinateurs

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

@media only screen and (min-width: 1140px)

Ce sont ceux que j'utilise, même si tu peux en trouver d'autres légèrements différents sur le net.

Il y a un outil très important lorsqu'on travaille sur les multiples résolutions: le Developer's tools de Chrome (Ctrl+Maj+I), que tu dois sans doute déjà utiliser pour inspecter les pages et savoir quelles propriétés CSS s'applique à chaque élément. Lance-le, et à l'extreme gauche du dev tools, tu as un icône de mobile. Clique cet icône et ton écran se transformera en écran de mobile/tablette, avec un vaste choix de modèles et de résolutions. Ça te permet de tester ton style sur toutes sortes d'appareil sans quitter ton navigateur.

[olivierdauxais]

Bonjour Tsilefy,

Un GROS MERCI pour ton aide, ça marche nickel. Mon site est maintenant adapté aux petits écrans.

Même si tu trouves qu'un petit tuto media css n'a pas lieu d'être dans ce fil classé en catégorie php.
Justement pour les gars comme moi qui se trompent d'orientation... En pensant php et non media css3.

Je mets donc ci-dessous un mini-tuto permettant d'adapter un site pour mobile en quelques lignes:

Dans le "head" des pages html ou php, on écrit par exemple le code suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen and (min-width: 981px)" type="text/css" href="normal.css" />
<link rel="stylesheet" media="screen and (max-width: 980px)" type="text/css" href="mobile.css" />

Dans le fichier "normal.css", qui positionne mon bloc1 au dessus du bloc 2B et 2C qui sont côte à côte, on écrit par exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
div#Wrap     {width:989px;margin:0px auto;}
div#Bloc1    {width:989px;background-color:#FF0000;margin-bottom:15px;}
div#Bloc2B   {width:487px;background-color:#00FF00;float:left;}
div#Bloc2C   {width:487px;background-color:#0000FF;float:left;margin-left:15px;}

Dans le fichier "mobile.css" qui va positionner, par exemple, ces 3 blocs les uns au dessus des autres, on écrit:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
div#Wrap     {width:100%;margin:0px auto;}
div#Bloc1    {background-color:#FF0000;margin-bottom:15px;}
div#Bloc2B   {background-color:#00FF00;margin-bottom:15px;}
div#Bloc2C   {background-color:#0000FF;margin-bottom:15px;}

On peut noter le "width" non plus exprimé en pixel mais en pourcentage et qu'on ne mentionne même plus le "width" des 3 blocs.

Voilà, un petit tuto de base. A vous les experts, y voyez vous des fautes?

------------------------------------------

@Tsilefy,
Lorsque tu parles du developer's tools de chrome, je suppose que tu parles d'une option dans le navigateur google chrome.
J'utilise Internet Explorer. Je joue avec le zoom pour tester mais c'est certainement moins bien que ton truc sur google chrome.

Pour tester la compatibilité de mon site en mobile, j'utilise:
https://www.google.com/webmasters/to....google.com%2F

D'après tes critères, mon pauvre petit net book ne rentre pas dans ta catégorie ordinateur. Son écran ne fait que 600x1024 px.
D'après les critères de google qui fixe la barre à 980px, mon petit net book peut jouer dans la cour des grands.

Encore merci.