1485 sujets

Web Mobile et responsive web design

Page initiale trop large pour l'écran

Bonjour,
Mon site correspond à ce que je veux faire sauf....

Sur mobile en format portrait ( je teste sur Android Samsung S7 ) lorsque j'ouvre une page, je n'ai qu'une partie de la page.
Après avoir pincé l'écran (réduction du zoom à la taille de l'écran) tout se déroule sans problème (bien lisible, pas de débordement.... conforme à, ce que j'ai prévu pour le format portrait smartphone).

(même problème quelque soit le navigateur pour mobile Firefox, Chrome, Edge et Internet Samsung)

Mon site est codé en XHTML 1.0 Transitional

J'ai dans le <head> de chaque page la balise :

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

et dans la CSS une media query:

@media screen and (max-width: 767px) and (orientation: portrait)
{
.html {
font-size: 130%;
}
.body {
font: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
margin: 0;
padding: 0;
width: auto;
max-width: 97%;
text-align: center;
color: #00F;
}
et dans les styles les tailles des polices... exprimées en "rem"

Pourquoi la page initiale ne s'ouvre -t-elle pas à la dimension de l'écran (malgré le "initial-scale=1.0) ?
Que modifier pour qu'elle le fasse ?

Merci de votre aide.
Je vais peut-être dire une bêtise, mais le meta viewport n'est-il pas associé à l'HTML5 plutôt que le XHTML?
Bonjour et merci pour votre réponse.

Depuis que j'ai posé la question, j'ai modifié les meta en enlevant le "initial-scale=1.0" et cela devient
<meta name="viewport" content="width=device-width" />

Sur Android (Samsung S7) cela fonctionne assez bien à savoir que dès que j'appelle une page depuis Google ou depuis la page index de mon site, la plupart du temps elle s'ouvre à la taille de l'écran, mais parfois lorsque je passe d'une page à l'autre par un lien interne, la nouvelle page s'ouvre "en grand" (plus grande que l'écran) et je dois dézoomer pour ramener la page à la taille de l'écran, mais c'est assez rare.

Il semble donc que :

1) Le XHTML 1.0 "comprend" l'instruction du meta viewport, qui n'est donc pas réservé au HTML 5
2) le "initial-scale=1.0" s'applique à la taille de la page du navigateur et pas à la taille de l'écran donc à l'ouverture si la page du navigateur (100%) est plus grande que l'écran (ce qui est le cas la plupart du temps) je n'en vois qu'une partie et je dois dézoomer. Par contre si je ne demande pas au navigateur de s'ouvrir à 100% ( avec le initial-scale=1.0) automatiquement la page s'ouvre à la taille de l'écran.
3) je n'ai pas encore trouvé d'explication pour les cas où j'ai encore des pages qui s'ouvrent "en grand".

cordialement,
J'ai déjà eu le cas sous deux conditions :
Mes tailles de blocs sont supérieures à la taille de l'écran.
L'affichage des images n'étaient pas responsive.
Sujet clos
Aller à