web-dev-qa-db-fra.com

Pourquoi le navigateur Android ne couvre-t-il pas ce paragraphe sur toute la largeur du navigateur?

Le problème:

enter image description here

La question

Le paragraphe remplira toute la largeur de la page en

  • Firefox
  • Firefox Mobile (testé avec 4.0.3 sur SGS2)
  • Chrome
  • Chrome Mobile Beta (testé avec 4.0.3 sur SGS2)
  • Internet Explorer
  • Internet Explorer Mobile (test avec Windows Phone Emulator)
  • Opera Mobile (testé avec 4.0.3 sur SGS2)
  • Navigateur natif Android (testé avec 4.0.3 sur l'émulateur SGS2 et Android)

Que dois-je faire pour qu'il en soit de même dans le navigateur Android par défaut?

J'ai essayé:

Veuillez noter que cet exemple est réduit pour montrer le problème que j'ai sur une page beaucoup plus grande. Je voudrais donc que la solution soit la moins perturbante possible. Par exemple, définir all les paragraphes de mon site sur float semble être une mauvaise idée.

width

L'augmentation de la valeur de la propriété width sur la classe CSS p n'a aucun effet.
Valeurs relatives: 100% et 1000% n'ont aucun effet. Les valeurs <100% ont un effet (le paragraphe devient plus fin).
Valeurs absolues: 1000px n'augmente pas la largeur, mais les valeurs basses la diminuent.

float

Lorsque vous définissez float : right; sur le paragraphe, l’affichage suivant s’affiche:
enter image description here

Réinitialisation CSS

Lorsque j'insère ces CSS Reset styles, la largeur du paragraphe n'est pas affectée.

position

Lorsque vous définissez position sur absolute sur le paragraphe, celui-ci s'affiche comme vous le souhaitez. Mais je ne suis pas sûr que ce serait sans danger pour généralement permis.

La source:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Android Browser Issue</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
      body {
        border : 3px dotted green;
        margin : 0;
        padding: 0;
      }
      p {
        border : 3px solid red;
        margin : 0;
        padding: 0; 
      }
    </style>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </body>
</html>

Vous pouvez le voir ici: http://jsfiddle.net/EYcWL/embedded/result/ ou y aller directement: enter image description here

androidhtmlcssandroid-4.0-ice-cream-sandwich
29
Der Hochstapler

Ce n'est pas un bug, vous n'avez pas besoin d'un correctif dans ECMAScript pour résoudre ce problème.

Vous devez penser à l'arbre dans lequel réside votre contenu.

window
 \- html
   \- body
     \- p
       \- content

Ainsi, la largeur de votre contenu est déterminée par les attributs CSS de l'élément p. Donc, comme vous voulez que le texte soit aussi large que la fenêtre de votre navigateur, nous pouvons essayer de mettre sa largeur à 100%; Ainsi:

p { width: 100%; display: block; margin: 0px; padding: 0px; }

Cependant, vous constaterez que cela ne fonctionne pas comme vous le pensiez. Ce n'est cependant pas un bug, mais simplement un malentendu de la norme. Ne regardons pas ce que la norme doit nous dire sur la définition d'une largeur en pourcentage sur un élément, voir la propriété width dans les détails du modèle de formatage visuel :

<pourcentage>
Spécifie un pourcentage de largeur. Le pourcentage est calculé par rapport à la largeur du bloc contenant de la boîte générée} _. Si la largeur du bloc conteneur dépend de la largeur de cet élément, la disposition résultante n'est pas définie en CSS 2.1.

Ce texte dit qu'il est calculé en fonction de la largeur du bloc conteneur. En regardant notre arbre, p est contenu dans body. Alors, quelle est la largeur de notre bloc conteneur?

Nous n'avons pas encore défini cette largeur, elle prend donc une valeur déterminée par le navigateur.

La solution ici est de définir également la largeur du corps, ce qui se traduit par l’ajout de 6 caractères:

html, body, p { width: 100%; display: block; margin: 0px; padding: 0px; }

Ainsi, la largeur de votre html correspond maintenant à 100% de la largeur de votre fenêtre, celle de body à 100% de votre html et votre largeur à p à 100% de votre body. cela devrait avoir toute la largeur.

L'essentiel est de réfléchir à votre arborescence DOM et de vérifier le standard CSS ...

9
Tom Wijsman

J'ai trouvé une solution à ce problème qui fonctionne réellement! Il s’agit en fait d’un paramètre du navigateur Android "Auto-Fit Pages". Désactiver cela résoudra le problème avec certitude.

Mike

12
mcottingham

Après avoir rencontré ce problème, La combinaison de méta-affichages et de requêtes multimédia a fourni la solution la plus simple. Le simple ajout de <meta name="viewport" content="width=device-width" /> au code HTML source fourni dans le fichier question a corrigé l'affichage dans le navigateur Android (à l'aide d'un périphérique virtuel Android 4.2). Citant le lien ci-dessus:

Normalement, la fenêtre de présentation prend une largeur que le fournisseur a jugée optimale pour l'affichage des sites de bureau.

En définissant la méta-fenêtre sur largeur du périphérique, vous êtes certain que la largeur de votre site est optimisée pour le périphérique sur lequel il est visualisé.

6
Dan Cruz

Ce n'est pas un problème de CSS, 

body, p { width: 100%; }

Ne semble pas fonctionner, s'il vous plaît voir cette capture d'écran .

Toutefois, si vous appliquez un arrière-plan au paragraphe, il s’étend alors complètement.

Cela ressemble à un bidouillage, mais je ne trouve aucune autre solution.

 background: url('');

Pas sûr que cela affichera une icône x d'image manquante sur certains navigateurs,
Vous pouvez aussi utiliser un png vide.

6
Neo

C'est un bug; vous devez forcer la déclaration de hauteur pour obtenir l'effet désiré; J'ai fait ce violon . 

Donc, je vous suggère d'utiliser .height () metod dans jQuery ou un autre framework js pour calculer la hauteur réelle du <p> et ajouter un style en ligne à la volée. C'est assez discret. 

J'espère que j'ai été utile.

3
bobighorus

Pour Android et les petits écrans sur le navigateur par défaut, le paragraphe prend la largeur du périphérique en tant que p-> max-width.

Dans mon cas, j'ai résolu avec viewport et du javascript:

//NOTE: Take Android boolean var from user-agent in request
var screenWidth=window.screen.width;
if (screenWidth<600 && Android) {
    var node = document.createElement('meta');
    node.name="viewport";
    node.content="initial-scale=0.1, maximum-scale=3";
    $("head").append(node);
}

Cela fonctionne pour toutes mes pages avec certaines requêtes de support pour différents dpi et hauteur de largeur de périphérique.

1
surfealokesea

Je ne pense pas que ce soit un bug: mon Android 4 change la largeur de p si je passe de portrait en paysage et si je double-clique pour zoomer, cela correspond parfaitement à l'écran. 

Gardez à l'esprit que la fenêtre d'affichage pour les mobiles affiche souvent une largeur d'environ 1000 pixels (peut-être 1024), alors que l'écran est plus petit; lorsque vous dites 100%, le navigateur peut utiliser la largeur de l'écran et non la largeur de la fenêtre. Cela vous permet de cliquer sur le texte pour ajuster automatiquement le paragraphe à l’écran sans le rediffuser. Ce comportement est probablement limité à la balise P et cela peut être considéré comme cohérent avec la sémantique de p.

0
FxIII