La page a été agrandie et non la largeur de la fenêtre d'affichage complète dans les navigateurs mobiles

J'ai des problèmes avec un design réactif. Comme il est optimisé pour les mobiles, j'ai inclus une balise Meta de fenêtre d'affichage qui devrait garantir que la page est chargée sans aucun zoom et occupe la fenêtre d'affichage complète. Cependant, voici ce qui se passe:La page a été agrandie et non la largeur de la fenêtre d'affichage complète dans les navigateurs mobiles

(Screenshot) When loaded

(Screenshot) When zooming out

Pour référence, le menu de la barre d'outils inférieure est la position: fixe et donc pas inclus dans le flux normal de la page, l'amenant à être la « normale » largeur. Cela se produit dans Chrome et Firefox mobile, donc je suppose qu'il ne dépend pas du navigateur. Une session de débogage de périphérique distant Chrome a révélé que l'en-tête est exactement aussi large que le <corps> et les éléments <html>, donc le problème est avec la page elle-même et pas avec l'en-tête seul.

Voici mon code (le menu supprimé pour simplifier):

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
    </head> 

    <body> 
    <div id="header"> 
     <h1>TremeClothing</h1> 
     <form id="search" action="page.php?stuff=things"> 
     <input type="text" name="search" autocomplete="off" spellcheck="false" /> 
     </form> 
    </div> 
    </body> 
</html>

Et:

body { 
    margin: 0; 
    padding: 0; 
    background-color: rgb(240, 240, 240); 
    font-size: 20pt; 
} 

#header { 
    width: 100%; 
    padding: 0.5rem 1rem 1rem 1rem; 
    background-color: rgb(0, 51, 51); 
    position: relative; 
    box-sizing: border-box; 
    text-align: center; 
} 

#header h1 { 
    display: inline; 
    margin: 0; 
    padding: 0; 
    color: rgb(102, 153, 153); 
    font-size: 3rem; 
} 

#search { 
    display: inline-block; 
    height: 3rem; 
    width: 16rem; 
    margin: 1rem 3rem 0 3rem; 
} 

#search input { 
    display: block; 
    height: 100%; 
    width: 100%; 
    padding: 0.5rem 0.5rem 0.5rem 3rem; 
    box-sizing: border-box; 
    background: rgb(102, 153, 153) no-repeat 0.5rem 0.5rem/2rem url(img/icons/search.svg); 
    color: rgb(0, 51, 51); 
    font-size: 1.5rem; 
    font-weight: bold; 
    border: none; 
    border-radius: 2rem; 
} 

#search input:focus { 
    outline: none; 
}

Source

2017-09-05 Nik

Votre page est zoomant correctement.

La raison pour laquelle la barre de recherche commence à glisser la page est parce que votre #search a une largeur fixe, 16rem, qui, en ajoutant à une marge fixe de 3rem de chaque côté, sort à un peu plus large que l'écran de votre téléphone . Essayez d'utiliser cela pour vos #search styles:

display: inline-block; 
height: 3rem; 
width: 80%; 
max-width: 16rem; 
margin: 1rem 10% 0 10%;

Cela permettra d'assurer que la largeur de votre #search est fluide, et jamais plus de 100% de la largeur de l'écran.

Source

2017-09-06 01:52:12 SpyderScript

La page a été agrandie et non la largeur de la fenêtre d'affichage complète dans les navigateurs mobiles

Répondre

Questions connexes