1486 sujets

Web Mobile et responsive web design

[Résolu] Détection écran

Pages :
Bonjour,

J'ai un site classique et j'ai créer une version mobile.

Ma question est la suivante, il y a t'il un code qui permette de détecter la définition d'un écran pour proposer, l'affichage sur une version "mobile" ?

L'idéal serait pour moi, que le code détecte la définition de l'écran et propose un version mobile pour un meilleur affichage.

Merci de vos retours.
Modifié par Tintin75 (03 Jul 2017 - 16:48)
Modérateur
Coucou,

Les media queries CSS semblent adaptées pour ce que tu veux faire non ?
Généralement on se base sur la largeur du viewport ce qui permet d'adapter le site à la largeur d'affichage peut importe si on est sur un téléphone ou sur un pc avec une fenetre resizé.
Mais si tu tiens à la résolution elle y est dans les media queries aussi https://developer.mozilla.org/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries#resolution

@media (min-resolution: 300dpi) { ... }

Modifié par _laurent (03 Jul 2017 - 15:25)
Merci, beaucoup, j'aime bien les exemples, c'est plus facile pour moi de comprendre.

Je vais lire les articles, merci encore. Smiley smile
Est-il possible que si on détecte l'écran d'un mobile ou dirige automatiquement vers une version du site.

www.macron.fr (desktop) et mobile.macron.fr (smartphone)

Dans mon cas, j'ai une version mobile qui a été conçu spécialement pour les smartphones. Si détection pc, on affiche la version desktop mais si on détecte un version smartphone on dirige direct sur la version mobile ?
Modérateur
Ha du coup c'est autre chose là. Les media queries ne font qu'appliquer des regles CSS supplémentaires. Si tu veux faire ca il va te falloir soit le détecter coté serveur soit faire une redirection une fois la page chargée (via Js par exemple, mais ca va faire un petit clignotement). Mais la je ne saurai pas te conseiller... donc je laisse la main.
Modérateur
Au passage on peut aussi se poser la question de la pertinence de la redirection. Pourquoi empêcher quelqu'un sur mobile d'aller sur le site desktop si il le veut consciemment ? Pourquoi ne pas juste afficher un lien en haut de page en signalamnt le site mobile etc. C'est question sont d'autant plus pertinente si les deux sites ne sont pas totalement iso.

Bon courage Smiley smile
Ok, merci. En gros, je souhaiterai si détection mobile, on dirige vers une version mobile.

Je sais que ça se fait. Bref, je vais bien trouver, merci encore pour ton aide, et passe une bonne semaine. Smiley cligne
J'ai indiqué sur mon site la version d'une version mobile. La personne arrive sur le site et elle est informée de la présence d'une version mobile.

Bon, je cherche toujours à améliorer, mais des fois, on part sur de mauvais chemin. Je sent que je vais rien toucher et laisser telle que c'est ...
Tu dit :

"Pourquoi ne pas juste afficher un lien en haut de page en signalamnt le site mobile etc. "

Un texte en haut de page centré, ou un bouton ? Le plus judicieux ? J'ai mis un bouton dans un cadre sur la page, mais je me demande si c'est bien visible ...
Modifié par Tintin75 (03 Jul 2017 - 16:07)
Modérateur
J'avais pas bien saisie le sujet. Tu peu remettre un post en le nommant plus explicitement du genre "redirection automatique vers le site mobile dédié" ou un truc du genre... Smiley smile

Bonne soirée
Modérateur
Alors pour un site dédié ce qui devrait se faire:

1) la détection se fait côté serveur. on utilise pour cela des librairies qui analysent les user-agents entre autres (ouissélemal). Un exemple: http://mobiledetect.net

2) On redirige l'utilisateur sur la bonne version du site. Cependant un lien permet de basculer de l'une à l'autre pour diverses raison: a) la détection n'est pas infaillible. b) en mobile on peut souhaiter pouvoir accéder aux informations qui ont été honteusement éjectées de la version mobile.

3) On stocke le choix dans une session/cookie, afin que ce choix ait la priorité sur la détection automatique.

4) On gère comme on le peut le référencement de cette bouillie infâme.

p.s. : Des nouveaux périphériques sortant régulièrement, il faut bien entendu mettre à jour régulièrement la librairie utilisée. Il faut aussi résoudre l'épineux problème suivant: quels périphériques sont mobiles et lesquels ne le sont pas (tablettes, phablettes, mini laptops, etc.)
Modifié par kustolovic (03 Jul 2017 - 16:09)
Je vais pas ennuyer le monde avec mon histoire. Je vais revoir, la signalisation de ma version mobile, comme tu l'as gentillement indiqué. Pourquoi faire compliqué, lorsque l'on peut faire simple. Il faut laisser le choix à la personne de la version qu'elle souhaite consulter. Tu vois je suis en pleine réflexion, et l'idée de base peut vite changer. Merci encore pour m'avoir ouvert les yeux.

N'étant pas pas un grand spécialiste, il faut faire le plus simple pour moi. Merci, de vos retours, c'est sympa.
Modifié par Tintin75 (03 Jul 2017 - 16:12)
Modérateur
Un site dédié mobile n'est pas forcément une hérésie, mais c'est plus compliqué à mettre en place, il faut doubler le code (et la maintenance), etc.

Généralement on réserve cela au très gros sites qui ont une équipe derrière, aussi parce que ces sites sont parfois délicats à gérer en responsive.
Ca va de ce côté là, je m'en sort. Site sous Bootstrap, ça roule. J'ai pas de souci de côté là.

J'ai mis un lien en haute page, site mobile, avec une direction sur la version mobile. Vue ou c'est placé, ça se voit sur le smartphone. Simple et efficace. J'ai pas mal de connexion en version mobile, donc il faut s'adapter ...
L'un des problèmes que tu vas avoir est que google va indexer tes pages mobiles et les servir à des gens qui surfent sur ordi de bureau et vice versa. Google peut aussi considérer que tes pages mobiles ou desktop sont du contenu dupliqué de l'une ou d'autre des versions de ton site et donc ne plus les proposer dans ses résultats de recherche. Bref si tu n'as pas encore de canonical/alternate mets les rapidement.
Pages :
Sujet clos
Aller à