1486 sujets

Web Mobile et responsive web design

[Résolu] Responsive et très grands écrans

Bonjour

j'ai un soucis de compréhension et de visualisation concernant la gestion du responsive sur les très grands écrans genre 4K.

J'ai développé mon site sur mon ordinateur et l'écran affiche 1536 *750 px. Pour ce qui est de la conception du site et la gestion du responsive jusqu’à 320 px en width pas de problème on se débrouille Smiley smile .

Par contre au delà de 2000 px environ le contenu du site dans une div qui a 1200 px en width pour faciliter la lecture sur le site sa fait minuscule au milieu de l'écran. En plus je n'ai pas d'écran 4K à disposition pour coder directement dessus.

1-Dois-je acheter un écran 4K et tout coder nativement dessus ?
2-Y'a t-il une possibilité de forcer le scale/zoome au chargement de la page et du coup la question qui en découle "à quoi sert un écran 4K dans ces cas là?"
3- Faut il faire l'impasse sur le responsive en 4K et laisser une div minuscule en plein milieu?
4- Tout autre conseil et le bienvenue car dans ma tête c'est le flou.

Merci à vous tous.
Bonjour,

Vous verrez qu'il existe peu de site tirant partit de ce type d'écran...

Mais pour faire bien les choses : oui, il faut s'en occuper, généralement la font est plus grande, et la colonne principale du site doit suivre en conséquence.
Administrateur
Bonjour,

1 et 2 : non
Surtout le 2 : merci de laisser l'utilisateur maître de ses choix, il a déjà ses préférences .
Exemple mon netbook a une dalle full HD (1920) mais c'est illisible pour moi sur 13.3", j'utilise un zoom système de Win10 à 150%. Je ne me rappelle plus si c'est par défaut mais je n'avais eu aucun mal à trouver ce réglage après l'achat.
Pour le 1, tu peux éventuellement afficher ta page dans une iframe dont la largeur est de 1920px (me rappelle plus des outils qui automatisent cela…).

Un point important : des lignes de texte trop longues (trop de caractères par ligne) sont illisibles, il y a un intervalle idéal.
Quelques infos et conseils sur https://webdesign.tutsplus.com/articles/life-beyond-960px-designing-for-large-screens--webdesign-7348 et ses ressources

1200px max ça me semble pas mal pour l'instant.
Ça n'empêche pas d'avoir des visuels qui eux occupent toute la largeur.
Bonjour,
j'ai un écran de 1920x1080. J'ai renoncé à adapter mes sites à ce format.
Voici ce que j'ai mis dans l'en-tête du css (je ne me souviens plus où j'ai trouvé cette astuce, sans doute sur Alsa...)

@media (min-width: 1200px){
	body {
        width: 1200px;
	font-size:1.2em;
	/* On ajoute une marge sur les cotés de l'écran */
	padding-right: 2px;
	padding-left: 2px;
	background-color: #FFF;
    /* Et on centre */
	margin-right: auto;
	margin-left: auto;
}}
@media (min-width: 1920px){
	body {
        width: 1400px;
	font-size:1.4em;
	/* On ajoute une marge sur les cotés de l'écran */
	padding-right: 2px;
	padding-left: 2px;
    /* Et on centre */
	margin-right: auto;
	margin-left: auto;
}}

Après, pour le texte, il faut jouer avec les em et aussi ne pas forcément suivre les valeurs que j'ai mises aux @media.
Voici deux captures d'écran, la première sans le code, la seconde avec, toujours sur mon écran 1920x1080 (réduit avec Gimp, sinon ça ne passe pas).
upload/1568976609-67790-screenshot-1.png
upload/1568976643-67790-screenshot-2.png

Il y a effectivement de grandes plages de blanc sur les côtés, mais c'est mieux qu'un site étiré en largeur.
Felipe a écrit :
Bonjour,

...

1200px max ça me semble pas mal pour l'instant.
Ça n'empêche pas d'avoir des visuels qui eux occupent toute la largeur.


Merci Felipe, c'est la solution vers laquelle je me suis rabattu
Bongota a écrit :
Bonjour,
j'ai un écran de 1920x1080. J'ai renoncé à adapter mes sites à ce format.
Voici ce que j'ai mis dans l'en-tête du css (je ne me souviens plus où j'ai trouvé cette astuce, sans doute sur Alsa...)
...
Il y a effectivement de grandes plages de blanc sur les côtés, mais c'est mieux qu'un site étiré en largeur.


Merci Bongota
Jean-Pierre-Bruneau a écrit :
Bonjour, si tu utilises Chrome, sur ta page clic droit et en bas choisi
"Inspecter" apparaît en bas de l'écran une zone qui permet TOUTES SORTES D'ANALYSES dont ce que tu cherche !
Va sur cette fenêtre ( tout a fait en haut à gauche de "Elements" tu as un double rectangle représentant un peut un portable.
Si tu clic dessus il devient bleu et fait apparaître en haut de ta page une barre en zones grise. si tu clic dans les zones de droites, tu va dans les très grands écrans, si tu clic de plus en plus a droite tu va vers les plus petits téléphones, bonne découverte Smiley cligne


Merci JP je connais cette "astuce" on va essayer et on verra bien
Modifié par tankarasu (23 Sep 2019 - 11:04)
Sujet clos
Aller à