web-dev-qa-db-fra.com

largeur du div 100% ne fonctionne pas dans le navigateur mobile

J'essaie de faire quelque chose qui, pensais-je, était très simple. L'en-tête d'un site Web que je construis est une couleur unie qui doit couvrir toute la largeur de l'écran, quel que soit le navigateur sur lequel il est visualisé. Ce que j'ai créé jusqu'à présent fonctionne à merveille sur les ordinateurs de bureau et les ordinateurs portables, mais lorsque je le teste une tablette ou un téléphone portable, l'en-tête ne s'étend pas complètement à droite. Le contenu à l'intérieur de l'en-tête couvre tout le chemin, ce qui est vraiment déroutant pour moi. Le seul moyen d'obtenir que la barre d'en-tête couvre toute la largeur consiste à définir la propriété position sur static, ce qui n'est pas ce dont j'ai besoin pour ce site. Cela ne me sert à rien. Ci-dessous sont les CSS et HTML que j'utilise. Quelqu'un pourrait-il y jeter un coup d'œil et me faire savoir ce qui me manque.

HTML:

<div class="header">
<div class="container">
<div class="header-content">
....Some Content goes in here....
</div> <!-- /.header-container -->
</div> <!-- /.container -->
</div> <!-- /.header -->

CSS:

html, body {
background-color: #949494;
width: 100%;
margin: 0px;
padding: 0px;
}

.header {
width: 100%;
min-width: 100%;
height: 200px;
background-color: #ffffff;
padding-top: 8px;
}

.container {
width: 1200px;
margin: 0 auto;
text-align: center;
}
cssmobilebrowserwidth
9
DanAdams

C'est ce qui m'arrivait aussi. Redimensionne très bien sur le bureau, mais en raison d’une bannière de 728 pixels en haut de mon blog, le mobile avait l’air terrible. Il est difficile d’adapter une large bannière sur un écran aussi petit sans causer de problèmes. Si vous n'avez pas de bannière, vous avez peut-être un élément trop large qui jette le reste de la conception. 

Cela a résolu le problème: <meta name="viewport" content="width=device-width, initial-scale=0.41, maximum-scale=1" /> (Cela va dans le <head>...</head>)

Réduisez la valeur initiale de 1,0 jusqu'à ce que vos éléments atteignent la totalité de la page à 100%. Cette échelle a rendu mon texte un peu trop petit, mais Flowtype.js m'a aidé. Je pourrais utiliser une bannière plus petite mais je suis satisfait de cette solution pour le moment.

MISE À JOUR: La solution ci-dessus n'est pas vraiment indépendante du périphérique. Par exemple, la "balance" peut être jolie sur votre téléphone mais trop petite sur votre tablette. Vous pourriez vouloir ceci à la place:

<meta name="viewport" content="width=800" />

Cela fait en sorte que tous vos appareils se comportent comme un écran de 800 pixels de large. Ou quelle que soit la largeur dont vous avez besoin. Fonctionne à merveille sur mon téléphone Android et ma tablette Nexus. Je pense que les navigateurs de bureau ignorent le paramètre "viewport", ce qui me convient parfaitement. 

20
PJ Brunet
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>
9
JJD

Je n'ai pas testé cela sur une tablette ou un téléphone portable, mais je pense que le problème est de définir une largeur fixe pour le conteneur "container". Comme vous avez défini 100% width pour html, body et l'en-tête div, ceux-ci occuperont toujours 100% de la largeur, qu'il s'agisse d'un navigateur, d'une tablette ou d'un téléphone portable. Cependant, ce n'est pas le cas du div "container" car il a une largeur fixe. Essayez de réinitialiser la largeur de la "conteneur" de cette manière:

.container {
    width: inherit;
    margin: 0 auto;
    text-align: center;
}
0
Satwik Nadkarny

Vous pouvez également donner min-width au corps. Quelque chose comme corps {width: 1200px;}, en fonction de vos paramètres de largeur. Certains clients peuvent vouloir la copie exacte du poste de travail sur leur mobile!. 

0
Mathew

En me basant sur la réponse de PJ Brunet, j’avais un problème de style similaire, mais je n’avais pas assez de souplesse pour changer les balises méta dans la tête html. Au lieu de cela, j'ai ajouté des valeurs de largeur minimum en pixels au fichier css. En utilisant la question initiale comme exemple:

.header {
  /* restrict the smallest device size to this width */
  min-width: 475px;
  height: 200px;
  background-color: #ffffff;
  padding-top: 8px;
}

Ensuite, vous pouvez cibler le prochain périphérique de taille classique:

@media (min-width:641px) {
    .header {
      /* force devises with a smaller width to observe this style */
      min-width: 700px;
    }
}

Ce n’est peut-être pas la meilleure pratique, mais cela vous permettra de capturer toutes les tailles de matériel dans des groupes plus faciles à gérer, en fonction de la conception. 

0
Chris