Script de redirection css pour mobile

Bonjour,

L'un de mes sites dispose d'un appel css courant

<link rel="stylesheet" href="desktop.css" />

Je cherche un script permettant d'appliquer dynamiquement une autre feuille (mobile.css) pour tous les téléphones.

Detect Mobile Browse a un article mais très mal documenté, je ne comprends pas comment le mettre en oeuvre.

Merci.
Modifié par deep (15 Feb 2020 - 14:34)

Hello

Pour cela il faut utilisé les Media Queries, te permettant de faire du CSS pour tel ou tel type d'écran (suivant la taille en pixel)

merci je connais media query mais cherche à injecter une autre feuille dynamiquement, je sais que c'est possible

Bonjour pour injecter une feuille de style dynamiquement en javascript, c'est très facile:

var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = 'mon-super-style.css';
document.head.appendChild(link);

C'est pour détecter le mobile que c'est coton. Il faut utiliser une librairie du genre: http://hgoebl.github.io/mobile-detect.js et la mettre régulièrement à jour, pour la prise en compte des nouveaux modèles et faux/vrais positifs/négatifs

deep a écrit :
Bonjour,
L'un de mes sites dispose d'un appel css courant

<link rel="stylesheet" href="desktop.css" />

Je cherche un script permettant d'appliquer dynamiquement une autre feuille (mobile.css) pour tous les téléphones.
Detect Mobile Browse a un article mais très mal documenté, je ne comprends pas comment le mettre en oeuvre.
Merci.

Probablement sans JS :

<link rel='stylesheet' media='screen and (min-width: XXXpx) and (max-width: XXXpx)' href='css/mobile.css' />

A positionner dans la section HEAD de la page HTML et dupliquer pour chaque resolution / feuille de style CSS souhaitée.
Bien entendu les XXX de "XXXpx" sont à remplacer par la valeur souhaitée...

Je te remercie beaucoup Sepecat, c'est sans doute la solution la plus simple.
J'ai pu trouvé un exemple de ce que je souhaitais vraiment.
Ce site appelle cette feuille en desktop, mais celle-ci en mobile.
L'appel de feuille est injecté dynamiquement (car il n'est pas possible de voir le style-nm.css dans le code source pour desktop) dans des pages php ou htm.

Ah oui j'avais pas très bien compris

deep a écrit :
Je te remercie beaucoup Sepecat, c'est sans doute la solution la plus simple.
J'ai pu trouvé un exemple de ce que je souhaitais vraiment.
Ce site appelle cette feuille en desktop, mais celle-ci en mobile.
L'appel de feuille est injecté dynamiquement (car il n'est pas possible de voir le style-nm.css dans le code source pour desktop) dans des pages php ou htm.

Perso j'évite au maximum les dépendances envers Javascript... ne serait-ce que parce que l'utilisateur peut avoir désactivé ledit JS sur son navigateur, ce qui, dans le cas présent, rend de facto caduque toute sélection dynamique de la feuille de style CSS.
Grosso modo, JS ne fera que reprendre les points de rupture qu'on peut définir dans la balise LINK de façon statique comme indiqué supra.
Après, cela reste un choix du concepteur du site et on peut toujours considérer que les utilisateurs qui désactivent JS (dont je suis) sont des paranoïaques invétérés...

sepecat a écrit :

les utilisateurs qui désactivent JS (dont je suis) sont des paranoïaques invétérés...

Pour moi ce sont des gens comme toi qui ont tout compris. Je suis obligé d'utiliser js quand je fais du templating mais sinon je m'en passe volontiers. Rien de plus chiant que ces cookies disclaimers, lightbox intempestive, etc…

deep a écrit :
Pour moi ce sont des gens comme toi qui ont tout compris. Je suis obligé d'utiliser js quand je fais du templating mais sinon je m'en passe volontiers. Rien de plus chiant que ces cookies disclaimers, lightbox intempestive, etc…

Ma motivation première pour désactiver JS était de ne pas laisser s'exécuter "a priori" des scripts sur le onload de la page sans savoir ce que les scripts en question effectuent comme opération.
Depuis le RGPD, tu as raison, ceci permet en outre de ne pas voir surgir sur chaque page les dialogues confirmant / infirmant l'utilisation des cookies. Les sites bien conçus prennent en compte la réponse utilisateur et ne reposent plus la question. Pour les autres... c'est à la hussarde et il faut confirmer son choix sur chaque page visitée. Très vite lassant...
Comme je l'ai déjà indiqué sur le forum, je suis toujours étonné de voir certains site afficher purement et simplement une page vide dès lors que tu as désactivé JS. Sauf erreur, il ne me semble pas avoir lu dans les spécifications HTML que les balises nécessitaient obligatoirement la présence du moteur de script pour afficher quelque chose. L'arrivée des ateliers logiciels reposant sur JS a facilité certains aspects du développement web mais a aussi ses côtés plus sombres (poids des pages, dépendances pour l'affichage, etc.).
Quant au suivi via Google Analytics... Si je peux les court-circuiter en désactivant JS cela me ravit au plus haut point (chacun a ses petites satisfactions dans la vie).