Mon site apparaît zoomé lorsqu'il est ouvert sur le téléphone

Question

TETE

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

CSS

@media (max-width: 600px){ 
body{position: absolute; top: 0px; left: 0px; width: 420px;} 

Mon site apparaît zoomé lorsqu'il est ouvert sur le téléphone
Screenshots is here
Comment puis-je résoudre ce problème?

Answer 1

Vous définissez la largeur de la » body être plus large que l'écran du téléphone (depuis votre balise de fenêtre provoque « px » unités de ne pas être 1: 1 pour 1 pixel sur le téléphone doesn ne correspond pas à une unité de 1 px). Vous devez utiliser soit des valeurs relatives à votre body de style

@media (max-width: 600px){ 
    body{ 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 100vw; 
     max-width: 420px; 
    } 
} 

ou créer une requête @media supplémentaire pour les périphériques plus étroits que 420px comme ceci:

@media (min-width: 420px) and (max-width: 600px){ 
    body{ 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 420px; 
    } 
} 

@media (max-width: 420px){ 
    body{ 
     position: absolute; 
     top: 0; 
     left: 0; 
     right: 0; 
    } 
} 

Edit:

Voici une autre approche avec une dynamique tag viewport:

<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
<script> 
window.onload = function() { 
    if(screen.width < 420){ 
     var viewport = document.getElementById('viewport'); 
     viewport.setAttribute('content', 'width=420, initial-scale=1'); 
    } 
} 
</script> 

Answer 2

initial-scale=1.0 indique au navigateur de régler le niveau de zoom sur normal (c'est-à-dire sans zoom avant ou arrière). Vous avez seulement besoin width=1000:

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