Le paragraphe remplira toute la largeur de la page en
Que dois-je faire pour qu'il en soit de même dans le navigateur Android par défaut?
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:
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.
<!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:
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 ...
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
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é.
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.
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.
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.
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.