29 votes

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 occupera toute la largeur de la page en

  • Firefox
  • Firefox Mobile (testé avec la version 4.0.3 sur SGS2)
  • Chrome
  • Chrome Mobile Beta (testé avec la version 4.0.3 sur SGS2)
  • Internet Explorer
  • Internet Explorer Mobile (testicules avec l'Émulateur Windows Phone)
  • Opera Mobile (testé avec la version 4.0.3 sur SGS2)
  • Android natif du navigateur (testé avec la version 4.0.3 sur SGS2 et émulateur Android)

Que dois-je faire il en fait 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 beaucoup plus d'une page. Je voudrais donc que la solution soit aussi peu perturbateur que possible. Par exemple, le réglage de tous les paragraphes sur mon site à flotteur semble être une mauvaise idée.

width

L'augmentation de la valeur de l' width de la propriété sur l' p classe CSS n'a pas d'effet.
Les valeurs relatives: 100% et 1000% n'ont aucun effet. Les valeurs <100% d'avoir un effet (paragraphe devient plus mince).
Valeurs absolues: 1000px ne pas augmenter la largeur, de faibles valeurs de la diminuer si.

float

Lorsque le paramètre float : right; sur le paragraphe, il s'affiche comme vous le souhaitez:
enter image description here

CSS Reset

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

position

Lorsque le paramètre position de absolute sur le paragraphe, il s'affichera comme souhaité. Mais je ne suis pas sur si qui serait à l'abri, généralement, ont 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

12voto

mcottingham Points 421

J'ai trouvé une solution à ce problème qui fonctionne réellement !! Il s'agit en fait d'un paramètre dans le navigateur Android "Pages d'ajustement automatique". Si vous désactivez cette option, ce problème sera résolu avec certitude.

Mike

9voto

Tom Wijsman Points 7139

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

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

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

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

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

Cependant, vous ferez l'expérience que cela ne fonctionne pas comme vous le pensiez. Toutefois, ce n'est pas un bug, mais simplement d'une incompréhension de la norme. Laissez pas avoir un oeil à ce que le standard a à nous dire sur la définition d'une percentual largeur sur un élément, voir l' width propriété dans le formatage visuel détails du modèle:

<pourcentage>
Spécifie un pourcentage de la largeur. Le pourcentage est calculé à l'égard de la largeur de la boîte du bloc contenant. Si le bloc contenant la largeur dépend de l'élément de largeur, puis la structure résultante est pas définie dans le CSS 2.1.

L'accent de la mine, ce texte dit qu'il est calculé par rapport à la largeur du bloc contenant. En regardant en arrière à notre arbre, p est contenue dans body. Alors, quelle est la largeur de notre bloc contenant?

Nous n'avons pas défini de largeur, de sorte qu'il prend une certaine valeur déterminée par le navigateur.

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

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

Alors, maintenant, votre html's largeur est de 100% de votre largeur de la fenêtre, body's largeur est de 100% de votre html et votre p's largeur est de 100% de votre body. cela devrait faire toute la largeur de la droite.

La ligne de fond est de penser au sujet de votre arborescence DOM et découvrez le CSS standard...

6voto

Neo Points 169

Ce n'est pas une question CSS,

body, p { width: 100%; }

N'a pas l'air de fonctionner, consultez cette capture d'écran.

Toutefois, si vous appliquer un arrière-plan de ce paragraphe, il n'est alors span entièrement.

Cela semble être un hack, mais je ne peux pas trouver une autre solution.

 background: url('');

Pas sûr si cela va afficher une image manquante icône en forme de x sur certains navigateurs,
alternativement, vous pouvez utiliser un vide png.

6voto

Dan Cruz Points 7016

Après avoir atteint ce problème, Combinant la meta viewport et les requêtes de média fourni la solution la plus simple. Juste l'ajout d' <meta name="viewport" content="width=device-width" /> à la source HTML fourni dans la question de correction de l'affichage dans le navigateur Android (à l'aide d'un Android 4.2 périphérique virtuel). Citant le lien ci-dessus:

Normalement, la fenêtre d'affichage à disposition prend une largeur que le vendeur a décidé est optimale pour l'affichage des sites de bureau.

En définissant la meta viewport de device-width, vous êtes sûr que votre site est la largeur est optimisé pour l'appareil, il est consulté sur.

3voto

bobighorus Points 447

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

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

J'espère avoir été utile.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X