Directives html ou php pour n'afficher que certains éléments en fonction de la résolution d'écran

Version imprimable

22/09/2014, 20h06
DevilYann

Directives html ou php pour n'afficher que certains éléments en fonction de la résolution d'écran

Bonjour à tous

Sur le site de mon client, on a remarqué que le site rame pas mal sur tablettes et smartphones. Je leur ai dit que c'était "normal", vu qu'il y avait un fichier css de 20Ko en plus à charger, et qui correspond au responsive design mis en place. Mais je sais bien que ce n'est pas 20Ko de plus qui change quoi que se soit.
Je soupçonne fortement que ce soit les différents scripts des divers réseaux sociaux (linked in, facebook, twitter et google +) qui font ramer le chargement. Donc je voudrai ne pas les charger vu que surtout je ne les affiche pas en mode réduit.

Quelles directives faut il mettre pour ne pas charger différents éléments en fonction de la résolution d'écran ou bien de la plateforme de lecture du site ?

Merci d'avance ;)
22/09/2014, 21h17
Muchos

Bonjour,

Il me semble que la détection de user-agent (en-têtes HTTP, Javascript, etc.) rate souvent.

En HTML, il existe l'attribut HIDDEN qui, normalement, permet de ne pas charger un élément (contrairement à un NONE en CSS).

Citation:

je sais bien que ce n'est pas 20Ko de plus qui change quoi que se soit.

C'est quand même beaucoup :/
23/09/2014, 10h18
Spartacusply

Je recommande également l'utilisation de l'user-agent pour détecter la plateforme côté serveur (l'user agent en PHP peut se trouver dans la variable globale $_SERVER['HTTP_USER_AGENT'])
23/09/2014, 11h09
DevilYann
Merci à vous 2

J'ai trouvé cette fonction sur le net :
Code:

1 2 3 4 5 function isMobileBrowser() { return strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod') || strstr($_SERVER['HTTP_USER_AGENT'],'android'); }
Le seul "soucis" que je vois est l'éventuelle compatibilité pour le futur, qui dit que ce sera tjs effectif dans quelques mois ou quelques années ?

C'est sûr il est possible que ça change avec le temps (rarement quand même...). Fais toi une fonction très facilement adaptable. Voici par exemple celle que j'utilise (qui détecte déjà beaucoup de terminaux mobiles, pas uniquement apple et android) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/**
 * Indique si l'internaute courant est sur une plateforme mobile ou non
 * @return boolean 
 */
function isMobileBrowser() {
    $mobileBrowser = array(
        'Android',
        'AvantGo',
        'BlackBerry',
        'DoCoMo',
        'Fennec',
        'iPod',
        'iPhone',
        'iPad',
        'J2ME',
        'MIDP',
        'NetFront',
        'Nokia',
        'Opera Mini',
        'Opera Mobi',
        'PalmOS',
        'PalmSource',
        'portalmmm',
        'Plucker',
        'ReqwirelessWeb',
        'SonyEricsson',
        'Symbian',
        'UP\\.Browser',
        'webOS',
        'Windows CE',
        'Windows Phone OS',
        'Xiino'
    );
 
    if (!isset($_SERVER['HTTP_USER_AGENT'])) {
        return false;
    }
    $userAgent = $_SERVER['HTTP_USER_AGENT'];
 
    $pattern = '/' . implode('|', $mobileBrowser) . '/i';
    return (bool) preg_match($pattern, $userAgent);
}

23/09/2014, 11h31
tdutrion

Bonjour,

Le mieux serait d'utiliser un "service" pour faire cela, par exemple utiliser une librairie (https://github.com/serbanghita/Mobile-Detect/) mais en ayant dans ton code une interface definissant les méthodes de cette librairie que tu utilises réellement (par exemple isMobile et isTablet uniquement).

D'un point de vue évolution, cette solution a plusieurs intérêts. Grâce à l'interface, tu pourras changer de librairie à ta guise, en faisant simplement une classe pour mapper ta nouvelle librairie avec ton interface. Côté nouveau mobiles / tablettes, il suffit de mettre à jour la librairie regulierement, et pour ce faire je recommande une installation via composer puis composer update de temps à autres.

Dans tous les cas, ce n'est honnetement pas la meilleure solution, et il existe des solutions pour avoir des images responsives notamment (grâce à srcset et à Modernizr notamment), et ainsi de suite sans detecter le navigateur. Je recommanderais ce genre de solutions. Par ailleurs, les lags sur mobile viennent généralement du javascript, donc il faut peut être voir quelle est la quantité de js dans la page, leur optimisation, le nombre de listeners...
23/09/2014, 11h36
Spartacusply

Citation:

Par ailleurs, les lags sur mobile viennent généralement du javascript, donc il faut peut être voir quelle est la quantité de js dans la page, leur optimisation, le nombre de listeners...

Le meilleur moyen de ne pas encombrer le navigateur web sur mobile avec des fichiers js qui ne le concerne pas (parce que la visualisation sur mobile à des fonctionnalités en moins par rapport à la version desktop par exemple) reste de le ne pas les afficher dans le code html rendu tout simplement. Plus on coupe haut dans la suite logique rendu de la page web, meilleures sont les performances.
23/09/2014, 11h47
DevilYann

Citation:

Envoyé par Spartacusply

Le meilleur moyen de ne pas encombrer le navigateur web sur mobile avec des fichiers js qui ne le concerne pas (parce que la visualisation sur mobile à des fonctionnalités en moins par rapport à la version desktop par exemple) reste de le ne pas les afficher dans le code html rendu tout simplement. Plus on coupe haut dans la suite logique rendu de la page web, meilleures sont les performances.

Oui c'est que je me dis aussi, c'est pour ça que je veux rajouter la directive pour ne pas les charger si on est sur mobile ou tablette. Donc je vais utiliser ta fonction merci ;)
Le seul petit défaut que je vois, est que les résolutions de plus de 1000px de largeur vont ou sont déjà arrivées sur tablette, donc ce serait dommage de ne pas afficher ces scripts sociaux non ?
23/09/2014, 11h54
Spartacusply

Citation:

Le seul petit défaut que je vois, est que les résolutions de plus de 1000px de largeur vont ou sont déjà arrivées sur tablette, donc ce serait dommage de ne pas afficher ces scripts sociaux non ?

Ca dépend de ce que tu souhaites. Dans ce cas là je te conseille d'utiliser la librairie proposée par Théocrite (qui n'est rien que ma fonction mais en beaucoup plus balèze pour pouvoir détecter très précisément de quel type de terminal mobile s'agit-il et avec un risque d'erreur négligeable).
23/09/2014, 12h48
DevilYann

Citation:

Envoyé par Spartacusply

Ca dépend de ce que tu souhaites. Dans ce cas là je te conseille d'utiliser la librairie proposée par Théocrite (qui n'est rien que ma fonction mais en beaucoup plus balèze pour pouvoir détecter très précisément de quel type de terminal mobile s'agit-il et avec un risque d'erreur négligeable).

Non je cherche + simple que ça, si les liens réseaux sociaux ne s'affichent pas sur tablette même avec une tablette ayant une résolution supérieure à 1000px de large, ce n'est pas bien grave après tout.
Merci à toi, je vais utiliser ta fonction bien pratique ;)
23/09/2014, 14h08
ABCIWEB

Salut,

Si tu veux connaître les dimensions utiles il va falloir passer par du javascript...

Mais il me semble qu'il y a des problèmes différents.
Les problèmes de lenteur sont souvent dus à la connexion (médiocre) wifi des portables. Evidemment limiter les requêtes externes peut soulager l'affichage et donc ton idée de supprimer les liens vers les réseaux sociaux est tout à fait justifiée. Mais dans ce cas de figure cela ne sert pas à grand chose de connaître les dimensions du périphérique d'affichage. Quand bien même la tablette ferait 1000px de large, tant qu'elle est connectée par l'intermédiaire d'une connexion médiocre, elle aura les mêmes problèmes. Dans l'absolu c'est la qualité de la connexion qu'il faudrait tester.
Enfin dans ton cas si c'est pour supprimer des liens vers les réseaux sociaux, je dirais que tu peux le faire assez facilement d'autant que cela n'est réellement un plus que pour certains types de contenus.