webentwicklung-frage-antwort-db.com.de

Warum überspannt der Android-Browser diesen Absatz nicht über die gesamte Browserbreite?

Das Problem:

enter image description here


Die Frage

Der Absatz füllt die gesamte Breite der Seite aus

  • Feuerfuchs
  • Firefox Mobile (getestet mit 4.0.3 auf SGS2)
  • Chrom
  • Chrome Mobile Beta (getestet mit 4.0.3 auf SGS2)
  • Internet Explorer
  • Internet Explorer Mobile (getestet mit Windows Phone Emulator)
  • Opera Mobile (getestet mit 4.0.3 auf SGS2)
  • Nativer Android-Browser (getestet mit 4.0.3 auf SGS2 und Android-Emulator)

Was muss ich tun, damit es im Standard-Android-Browser genauso geht?


Ich habe es versucht:

Bitte beachten Sie, dass dieses Beispiel reduziert ist, um das Problem zu zeigen, das ich auf einer viel größeren Seite habe. Daher möchte ich, dass die Lösung so wenig störend wie möglich ist. Zum Beispiel scheint es eine schlechte Idee zu sein, all paragraphs auf meiner Site auf Floating zu setzen.

width

Das Erhöhen des Werts der Eigenschaft width für die CSS-Klasse p hat keine Auswirkungen.
Relative Werte: 100% und 1000% haben keine Auswirkung. Werte <100% wirken sich aus (Absatz wird dünner).
Absolute Werte: 1000px erweitert die Breite nicht, niedrige Werte verringern sie jedoch.

float

Wenn Sie float : right; im Absatz einstellen, wird dies wie gewünscht angezeigt:
enter image description here

CSS zurücksetzen

Wenn ich diese CSS Reset Stile einfüge, wird die Breite des Absatzes nicht beeinflusst.

position

Wenn Sie position in dem Absatz auf absolute setzen, wird dies wie gewünscht angezeigt. Aber ich bin mir nicht sicher, ob das generell sicher aktiviert worden wäre.


Die Quelle:

<!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>

Sie können es hier sehen: http://jsfiddle.net/EYcWL/embedded/result/ oder gehen Sie direkt dorthin: enter image description here

29
Der Hochstapler

Dies ist kein Fehler. Sie benötigen keine Korrektur in ECMAScript, um diesen Fehler zu beheben.

Sie müssen über den Baum nachdenken, in dem sich Ihr Inhalt befindet.

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

Die Breite Ihres Inhalts wird also durch die CSS-Attribute des Elements p bestimmt. Da Sie also möchten, dass der Text so breit ist wie das Fenster Ihres Browsers, können wir versuchen, die Breite auf 100% zu setzen. somit:

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

Sie werden jedoch feststellen, dass dies nicht so funktioniert, wie Sie gedacht haben. Dies ist jedoch kein Fehler, sondern lediglich ein Missverständnis des Standards. Werfen wir einen Blick darauf, was der Standard zum Festlegen einer prozentualen Breite für ein Element zu sagen hat, und lesen Sie die width -Eigenschaft in den Details des visuellen Formatierungsmodells :

<Prozentsatz>
Gibt eine prozentuale Breite an. Der Prozentsatz wird berechnet in Bezug auf die Breite des Blocks, der die generierte Box enthält. Wenn die Breite des enthaltenen Blocks von der Breite dieses Elements abhängt, ist das resultierende Layout in CSS 2.1 undefiniert.

Hervorheben mein, dieser Text sagt, dass es in Bezug auf die Breite des enthaltenden Blocks berechnet wird. Rückblickend auf unseren Baum ist p in body enthalten. Wie breit ist unser Block?

Wir haben diese Breite noch nicht definiert, daher nimmt sie einen vom Browser festgelegten Wert an.

Die Lösung besteht darin, auch die Breite des Körpers zu definieren, was das Hinzufügen von 6 Zeichen bedeutet:

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

Jetzt beträgt die Breite von html 100% der Breite Ihres Fensters, die Breite von body 100% der Breite von html und die Breite von p 100% der Breite von body. dies sollte die ganze Breite richtig machen.

Die Quintessenz ist, über Ihren DOM-Baum nachzudenken und sich den CSS-Standard anzuschauen ...

9
Tom Wijsman

Ich habe eine Lösung für dieses Problem gefunden, die tatsächlich funktioniert !! Dies ist eigentlich eine Einstellung im Android-Browser "Seiten automatisch anpassen". Wenn Sie dies deaktivieren, wird das Problem mit Sicherheit behoben.

Mike

12
mcottingham

Nachdem Sie auf dieses Problem gestoßen sind, bot das Kombinieren von Meta-Ansichtsfenstern und Medienabfragen die einfachste Lösung. Durch Hinzufügen von <meta name="viewport" content="width=device-width" /> zum Quell-HTML-Code in question wurde die Anzeige im Android-Browser korrigiert (mithilfe eines virtuellen Android 4.2-Geräts). Zitiert den obigen Link:

Normalerweise hat das Layout-Ansichtsfenster eine Breite, die der Anbieter für die Anzeige von Desktop-Websites für optimal befunden hat.

Wenn Sie das Meta-Ansichtsfenster auf Gerätebreite einstellen, stellen Sie sicher, dass die Breite Ihrer Website für das Gerät optimiert ist, auf dem sie angezeigt wird.

6
Dan Cruz

Dies ist kein CSS-Problem.

body, p { width: 100%; }

Scheint nicht zu funktionieren, siehe diesen Screenshot .

Wenn Sie jedoch einen Hintergrund auf den Absatz anwenden, wird dieser vollständig gespannt.

Dies scheint ein Hack, aber ich kann keine andere Lösung finden.

 background: url('');

Ich bin mir nicht sicher, ob in einigen Browsern das Symbol x für ein fehlendes Bild angezeigt wird.
Alternativ können Sie auch ein leeres PNG verwenden.

6
Neo

Es ist ein Fehler; Sie müssen die Höhenangabe erzwingen, um den gewünschten Effekt zu erzielen. Ich habe diese Geige gemacht .

Daher empfehle ich Ihnen, .height () in jQuery oder einem anderen js-Framework zu verwenden, um die tatsächliche Höhe des <p> zu berechnen und beim Fliegen einen Inline-Stil hinzuzufügen. Es ist ziemlich unauffällig.

Ich hoffe ich war hilfreich.

3
bobighorus

Für Android und kleine Bildschirme im Standardnavigator wird für den Absatz die Gerätebreite als p-> maximale Breite verwendet.

In meinem Fall habe ich mit Ansichtsfenster und etwas Javascript gelöst:

//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);
}

Dies funktioniert für alle meine Seiten mit einigen Medienabfragen für unterschiedliche dpi-Werte und Gerätebreiten.

1
surfealokesea

Ich glaube nicht, dass dies ein Fehler ist: Mein Android 4 ändert die Breite von p, wenn ich vom Hoch- zum Querformat wechsle und wenn ich zum Zoomen doppelt klicke, passt es genau auf den Bildschirm.

Beachten Sie, dass das Ansichtsfenster für Mobiltelefone häufig ungefähr 1000 Pixel (möglicherweise 1024 Pixel) breit ist, während der Bildschirm kleiner ist. Wenn Sie 100% sagen, verwendet der Browser möglicherweise die Bildschirmbreite und nicht die Ansichtsfensterbreite. Auf diese Weise können Sie auf Text klicken, um den Absatz automatisch an den Bildschirm anzupassen, ohne ihn neu zu fließen. Wahrscheinlich ist dieses Verhalten auf das P-Tag beschränkt, und dies kann als konsistent mit der Semantik von p angesehen werden.

0
FxIII