1322 sujets

Web Mobile et responsive web design

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.