forcer le desktop mode sur un smartphone

j'ai trouvé la solution, mais je ne la comprend pas :(

a marqué ce sujet comme résolu.

Bonjour,

j’ai fait un site pour des amis d’une association locale. Comme la diffusion est réduite, les problèmes que j’ai créés sur mon site ne sont pas "graves" (c’est pas le site d’une multinationale, quoi) Il n’y a donc aucun besoin urgent, mais ça m’ennuie moi personnellement, alors je creuse un peu. ^^ le problème est de ma faute : J’ai fait le site sur un PC, en le pensant pour afficher sur un PC, et franchement nikel. Mais si on passe sur mobile… beurk beurk beurk ! Le site rend quand même bien si je coche dans le navigateur "version pour ordinateur". Ou disons que c’est moins pire, que tout reste lisible, et que le texte ne sors pas des cadres. ^^ J’ai donc cherché un moyen de forcer cette affichage en version mobile. Stack Overflow m’a donné la réponse : remplacer

<meta name="viewport" content="width=device-width, initial-scale=1.0">

par

<meta name="viewport" content="width=1024">

J’ai bien le résultat escompté, mais je ne le comprends pas, et la doc de Mozila ne m’aide pas. Qui est 1024 ? Pourquoi 1024 ? Quelle est l’unité de 1024 ? Mozila dit des pixels, mais mon smartphone a 1440 pixels de long, mon PC de développement 1920, et mon PC fixe 3840 : it works heaventhly, donc je suis perplexe. Même l’explication de "Un pixel n’est pas un pixel" me laisse bof bof car pour l’écran 4K, on a quand même un rapport 3.75 avec les 1024 pixels.

Pouvez-vous m’expliquer ce que j’ai fait exactement ? merci. :)

edit : Je pourrai demander sur stack overflow directement, mais pas envie de up un sujet de 7 ans, et j’aime la baguette et le fromage. <3

+0 -0

Hello,

1024 c’est effectivement un nombre de pixels pour CSS. Les pixels en CSS ne correspondent pas toujours aux pixels de l’écran, puisque celui-ci peut avoir une densite de pixels (ppi) variable.

En fonction de tes paramètres système tu auras donc un ratio changeant (tu peux d’ailleurs joué avec en changeant le zoom dans ton navigateur ou en changeant les paramètres d’affichage de ton système).

Le ratio entre 4k et 1080 est de 4 (4k a deux fois plus de pixels dans chaque direction par rapport à un écran Full-HD de même dimensions, soit 4 fois plus au total).

Ton 1024 est ici un nombre arbitraire hérité des anciens écrans 4:3, là où les dimensions actuelles sur desktop sont plutôt en 16:9. D’où ton ratio qui n’est pas "rond".


Par contre attention avec l’affichage desktop sur mobile : ça crée une expérience qui peut souvent dérouter l’utilisateur puisque tu affiches au final des zones réactives beaucoup trop petite et force potentiellement les gens à zoomer/dézoomer plus que nécessaire. Au-delà de l’aspect accessibilité, ça crée pas mal de frictions pour tout le monde.

Si tu veux fournir une expérience de qualité il faudra sans doute te tourner vers les media queries pour adapter ton design à différents formats.

Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte