1433 sujets

Web Mobile et responsive web design

Bonjour,
sur un site, j'ai un problème avec les mobiles, la page n'est pas fixée sur le viewport, on peut la tirer vers la gauche et un petit espace apparaît à droite de l'écran, elle n'est pas stable, comme si elle dansait. Je n'ai pas ce problème sur un autre site que j'ai réalisé en grid, tout est stable, la page ne peut pas bouger. Et je n'arrive pas à voir où est la différence entre mes deux réalisations.
Edit : Avec un lien, ça ira mieux : https://musiquenvrac.fr
J'ai pourtant réglé le html
html {
 	width:100%;
	margin:auto 0;
	overflow-x: hidden;}

et aussi
 *, *:before, *:after {
	box-sizing : border-box;
	box-sizing: inherit;} 

Bien sûr, la balise meta viewport est présente. Je pense que le problème vient de ce que je dois mettre sur html et body, en début de css. Mais quoi, exactement ?
Mobile SAMSUG Galaxy S6 mais sur safari le problème est aussi là, bien que moindre.
Modifié par Bongota (19 Oct 2021 - 19:32)
Modérateur
le pied qui danse, ce serait dû à
animation:skew .6s infinite;

ligne 853 du fichier style.css .

Il y a aussi , des margin horizontal calé sur 50% de chaque coté, ça ne laisse pas beaucoup de place au contenu Smiley cligne

cdt
Modifié par gcyrillus (19 Oct 2021 - 22:08)
Merci d'avoir regardé ce problème.
animation/skew est là pour faire bouger légèrement le menu du bas sous forme de petites images, de façon à le signaler. Je ne suis pas certain que ce soit là la clé. Quand je parle de "danse", je ne parle pas de quelque chose d'automatique, mais qui survient sous l'action du doigt. As-tu essayé sur un mobile ? C'est très désagréable, la page n'est pas stable. Et c'est d'autant plus énervant que deux autres sites de ma production n'ont pas ce problème.
Les marges, oui, mais c'est un essai de centrage qui est arrivé après le problème de la page instable.
Je vais tenter quand même en enlevant cette animation, mais mon autre site a aussi cette animation en place.
Modérateur
En effet en testant sur mobile on voit que tu as des débordement (overflow:hidden n’empêche pas de glisser), en appliquant
* {
  box-sizing:border-box;
}
div {
  max-width:calc(100% - 3px);
}

Ce débordement semble disparaitre et l'overflow-x:hidden sur html inutile, du moins sur l'affichage mobile, sur les autres résolution c'est énorme ce débordement Smiley cligne .

Pour débugger tu peut ajouter un padding right a HTML et placé une ombre intérieur a tout tes élements
par exemple quelque choses du genre :
html {
padding-right:3em;
background:transparent;
}
body {
background:white
}
* {box-shadow:inset 0 0 0 3px!important;
visibility:visible!important;
opacity:1!important;
}

pour voir au mieux ou sont chaque élément de ta page.
Salut,
voilà ce qu'on appelle une réponse pertinente Smiley biggrin
En effet, j'avais plusieurs débordements que je ne soupçonnais pas. Avec ta méthode, que je ne connaissais pas, je les aient traqués les uns après les autres. Finalement, c'est top, la page ne bouge plus sous le doigt. Smiley ravi
Par contre, j'ai créé un problème surle petit bandeau menu avec les miniatures. Lui aussi débordait mais maintenant que je l'ai raccourci, il reste une place vide à sa droite. Si je l'allonge, immédiatement, il déborde. Idem pour le petit bandeau blanc du haut qui apparaît au scroll, avec JavaScritp. Je vais bien trouver, le plus gros est fait.
Merci beaucoup.
Je mettrai résolu quand j'aurai réglé ce dernier problème.
ps : donc je laisse comme ça ?
* { box-sizing:border-box;}
div {
  max-width:calc(100% - 3px);}
html {
 	width:100%;
	margin:auto 0;
	overflow-x: hidden;}

Modifié par Bongota (20 Oct 2021 - 22:35)
Modérateur
Bongota a écrit :
Salut,
....
Merci beaucoup.
...
ps : donc je laisse comme ça ?
* { box-sizing:border-box;}
div {
  max-width:calc(100% - 3px);}
html {
 	width:100%;
	margin:auto 0;
	overflow-x: hidden;}


Tant que tu n'as pas soulevé le lièvre, tu peut. L'idéal est quand même de trouver où ça pêche.

Des marges ? des display ? inline-x , position ? une mauvaise imbrication ? j'avoue ne pas avoir scruté l'ensemble de ton code . A priori, le bandeau qui danse n'était pas vraiment responsable.

cdt
Salut,

avoir réglé le problème des dépassements et stabilisé la page, c'est bien, avoir compris où était le problème, je ne trouve toujours pas.

Comme tu le précise, il doit y avoir quelque part une mauvaise configuration.

À moins que le sujet ait été déjà traité sur le forum, je crois que ce serait bien que l'un d'entre vous fasse un petit tuto sur ces problèmes de structure et de dépassements, qui sont assez vicieux dans le sens où ils n'empêchent pas un site de fonctionner.
Bonne journée.
Modérateur
On peut essayer de lister quelques points repères en vrac

* le modèle de boite mal choisi (box-sizing)
* l'oubli d'une feuille de reset pour uniformisé ou remettre à 0 certaines valeurs.
* marges interne ou externes latérales exprimés en % : le cumul marge + contenu peut facilement être supérieur à la largeur de l'écran.
* width:100% ou 100vw . l'un ne voit pas les marges extérieur et l'autre ne voit pas non plus les barres de défilement.
* transform (le contenu occupe l'espace qu'il devrait occuper avant transformation =>scale(0.5) est visuellement trompeur ,à l'opposé, le navigateur cherchera à montrer ce qui éventuellement sort d'un coté de l'écran en fonction du sens de lecture.
* par le passé : les ombrages (cela ne semble plus être le cas, sauf peut-être navigateur exotique (box ou TV android, console de jeux, OS bridé, etc ...) .
* Les display comme ceux du table-layout, mais aussi les inline-X ou le contenu peut élargir le conteneur au delà de la largeur dispo initiale.
* column CSS avec une hauteur fixe, qui s’étalera du coup horizontalement idem pour flex en colonne.
* les enfant grid ou flex dont les contenus peuvent débordés et se superposés avec ou sans flex-shrink pour flex.
* des imbrications sur plusieurs niveau impliquant des flex/grid/block ou le calcul des largeurs devient aléatoire (gap, padding, margin , ... , débordement flex non contrôlé : (sans ajout d'overflow ou min-width pour compenser ), élément de formulaire (form,fieldset) ou autre (ul,ol,li , figure, video,iframe,object, ....) qui peuvent venir rendre hasardeux les calculs de largeurs par le navigateur.
* les valeurs en vX ou % qui s'arrondissent pas comme on le souhaiterais une fois cumulées
* se méfier des max-content et min-content
etc ...

Quelques garde-fous utilisables selon les contextes:
1) Les validateurs HTML et CSS pour débusquer les typos et imbrications hasardeuses.
2) en vrac
flex-wrap
max-width
se méfier de width
overflow

auto-fill/auto-fit
se méfier minmax()
se méfier min()
max()
se méfier de fit-content()
flex-shrink
font-size
word-break/break-word
calc()
clamp()
etc ...

se méfier = plus que les autres, ne pas oublié qu'ils sont là !

sans oublier les mediaqueries pour réorchestrer tout ça

C'est une liste en vrac non exhaustive qui peut-être modifiée, allongée et commentée , et on s'aperçoit vite que c'est plus complexe qu'il n'y parait , Il y a aussi ce qui concerne le contenu qu'il faut laissé vivre et qui est probablement la chose la plus complexe à anticiper.

Faire un tuto la dessus , il va être difficile de lister et catégoriser l'essentiel pour ensuite aller dans les détails et en faire quelque chose de clair et confortable à lire.
Je pense que le premier conseil est de vérifier au fur et à mesure de l'insertion de contenu et de nouvelle règle qu'il n'y a pas de débordement qui apparaissent.

P.S. j'en oubliais d'autres dans la trousse à outils qui sont encore assez récent pour ne pas y penser au premier abord:

all:revert; pour faire un reset en cours de route ou faire fis d'un framework sur une zone particuliere.

les selecteurs :is() et :not() qui permettent facilement d'augmenter la specifité/poids d'un selecteur et :where() qui lui n'a aucune incidence sur la spécifité/poids du selecteurs et qui permet d'ajouter des règles qui ne seront prises en compte seulement si elle ne sont pas indiquer ailleurs. Ces 3 là permettent de redéfinir certaines règles sous conditions sans que leur moment de chargement ai une réelles incidence. (ne tenter plus les !important, ils n'y a plus vraiment d'excuses avec ceux là , sauf cas de style dans l'attribut style.)
Modifié par gcyrillus (21 Oct 2021 - 15:47)
Quel travail !
pour le moment je me sert de ce que tu m'a proposé :
* {
  box-sizing:border-box;}
div {
  max-width:calc(100% - 3px);}

qui a l'air de bien régler le problème. J'ai quand même commencé à corriger certains points et remis le tout en ligne qui fonctionne bien.
Cet échange m'aura été très utile et j'espère que d'autres vont s'en emparer.
Je suis parti sur un gabarit que j'ai rendu responsive (il ne l'était pas) et j'ai effectivement bien charcuté le tout. C'est sûr que j'ai du travail sur la planche.
Merci pour tout.