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

Lesezeit: 2 Minuten

Benutzer-Avatar
Oliver Salzburg

Das Problem:

Geben Sie hier die Bildbeschreibung ein


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 (testet 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 dasselbe tut?


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. Einstellung zum Beispiel alle Absätze auf meiner Website schweben zu lassen scheint eine schlechte Idee zu sein.

width

Wertsteigerung der width Eigentum auf der p CSS-Klasse hat keine Auswirkung.
Relative Werte: 100% und 1000% haben keine Wirkung. Werte <100% wirken sich aus (Absatz wird dünner).
Absolute Werte: 1000px erweitert die Breite nicht, niedrige Werte verringern sie jedoch.

float

Beim Einstellen float : right; Auf dem Absatz wird es wie gewünscht angezeigt:
Geben Sie hier die Bildbeschreibung ein

CSS-Reset

Wenn ich diese einfüge CSS-Reset Stile bleibt die Breite des Absatzes unberührt.

position

Beim Einstellen position zu absolute auf dem Absatz wird es wie gewünscht angezeigt. Aber ich bin mir nicht sicher, ob es sicher wäre, dies im Allgemeinen zu aktivieren.


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: Geben Sie hier die Bildbeschreibung ein

  • Das Problem existiert nicht (dh die Seite zeigt OK an) auf meinem Android (2.3.5). Könnte dies ein sporadischer Fehler sein, der jetzt behoben wurde?

    – Jukka K. Korpela

    23. März 2012 um 4:29 Uhr

  • Passiert immer noch auf meinem Android 4 Browser. Aber ich denke, es ist sowieso kein wirklicher Bug.

    – Oliver Salzburg

    23. März 2012 um 8:12 Uhr

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“. Durch Deaktivieren wird dieses Problem mit Sicherheit behoben.

Mike

  • Das macht sehr viel Sinn, schöner Fund! +1

    – Tamara Wijsmann

    4. Oktober 2012 um 11:15 Uhr

  • “Bitte schalten Sie Seiten automatisch anpassen aus, um diese Website korrekt zu verwenden”. Ha!

    – Matt Parkins

    21. Mai 2013 um 9:57 Uhr

  • Ich habe Android 4.1 – 4.3 Standardbrowser ausprobiert, dies ist die Lösung. Ich hoffe, die Person, die diese Frage gestellt hat, kann diese Antwort akzeptieren 🙂

    – mabeiyi

    30. September 2015 um 23:48 Uhr


Benutzer-Avatar
Tamara Wijsmann

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

Sie müssen an den Baum denken, in dem sich Ihre Inhalte befinden.

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

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

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

Sie werden jedoch feststellen, dass dies nicht so funktioniert, wie Sie es sich vorgestellt haben. Dies ist jedoch kein Fehler, sondern lediglich ein Missverständnis des Standards. Schauen wir uns nicht an, was uns der Standard über das Setzen einer prozentualen Breite auf einem Element zu sagen hat, siehe die width -Eigenschaft in den Details des visuellen Formatierungsmodells:

Gibt eine prozentuale Breite an. Der Prozentsatz wird berechnet in Bezug auf die Breite des umgebenden Blocks der generierten Box. Wenn die Breite des umgebenden Blocks von der Breite dieses Elements abhängt, ist das resultierende Layout in CSS 2.1 nicht definiert.

Hervorhebung von mir, dieser Text besagt, dass er in Bezug auf die Breite des umschließenden Blocks berechnet wird. Rückblickend auf unseren Baum, p darin enthalten ist body. Also, was ist die Breite unseres umschließenden Blocks?

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

Die Lösung besteht hier darin, auch die Breite des Körpers zu definieren, was bedeutet, dass 6 Zeichen hinzugefügt werden:

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

So, jetzt dein htmlDie Breite von entspricht 100 % der Breite Ihres Fensters. bodyDie Breite von entspricht zu 100 % Ihrer html und dein pDie Breite von entspricht zu 100 % Ihrer body. Dies sollte die ganze Breite richtig machen.

Die Quintessenz ist, über Ihren DOM-Baum nachzudenken und den CSS-Standard zu überprüfen …

  • Scheint das Problem für mich nicht zu lösen? dl.dropbox.com/u/6562060/…

    – Neo

    14. April 2012 um 11:51 Uhr

  • @Anti-Girl: Dein <p> scheint in diesem Fall das Problem zu sein, während die anderen beiden korrekt funktionieren. Probieren Sie Sachen wie min-width: 100% ebenso gut wie display: block um es verständlich zu machen width: 100%. Bei Oliver hat es funktioniert.

    – Tamara Wijsmann

    14. April 2012 um 12:10 Uhr


  • @Anti-Girl: Er hat meine Antwort akzeptiert und mir im Chat gesagt, dass es funktioniert hat. Ich schaue mir jetzt Ihren Fall an…

    – Tamara Wijsman

    14. April 2012 um 12:15 Uhr


  • oh ok, danke – ich dachte, er war überwältigt von der ausführlichen Antwort 🙂

    – Neo

    14. April 2012 um 12:19 Uhr


  • Die Antwort funktioniert tatsächlich nicht. Wenn Sie seine Änderungen eingeben, zeigt die Seite den Text in Android 4 immer noch nicht über den gesamten Bildschirm an (erstellen Sie einfach eine Webseite mit dem obigen Code, Sie müssen Ihre eigene nicht testen) … Ich muss noch eine Lösung finden, aber andere suchen nicht zu viel nach, wenn Sie feststellen, dass die akzeptierte Lösung nicht funktioniert

    – Richard Sinden

    3. Oktober 2012 um 21:45 Uhr


Benutzer-Avatar
Neo

Dies ist kein CSS-Problem,

body, p { width: 100%; }

Scheint nicht zu funktionieren, siehe bitte dieser Screenshot.

Wenn Sie jedoch einen Hintergrund auf den Absatz anwenden, spannt er sich dann vollständig auf.

Das scheint ein Hack zu sein, aber ich kann keine andere Lösung finden.

 background: url('');

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

  • margin und padding Macht p ein Blockelement zu sein, deshalb habe ich vorgeschlagen display: block Verwenden Sie als Lösung für Ihr Problem keine schmutzigen Hacks wie das Einstellen des Hintergrunds …

    – Tamara Wijsman

    14. April 2012 um 12:19 Uhr

  • Unbedingt einschließen html auch, und Ihre style Tag fehlt ein Attribut. Wir haben dieses Problem tatsächlich zuerst im Chat gelöst, danach habe ich die Lösung hier gepostet, also entschuldigen Sie die Unvollständigkeit. Tatsächlich scheint es, dass die Fehler im Android-Browser jetzt anders sind als damals. Um diese Einstellung vollständig festzulegen, ist auf jeden Fall auch eine Höhe erforderlich. Wenn Sie dieses Problem weiterhin haben, stellen Sie bitte eine neue Frage.

    – Tamara Wijsmann

    14. April 2012 um 12:36 Uhr


  • Danke für die Nachverfolgung, die Höhe behebt es, aber nur, wenn es sich um einen bestimmten Pixelwert handelt, also ist es leider nicht die richtige Lösung! danke für die Hilfe

    – Neo

    14. April 2012 um 12:42 Uhr


  • @Anti-Gil: Nun, das macht tatsächlich Sinn: Damit das Element eine bestimmte Breite annimmt, braucht es ein Element darum herum, in dem es fließen kann, body ist für diese Angelegenheit ungültig, also versuchen Sie es in a zu verpacken div. Wenn Sie kein Element darum herum angeben, muss Ihr Element als funktionieren blocksondern ein zu werden block Sie brauchen nicht nur width aber auch die height. Dies könnte also gelöst werden, indem es in ein div eingeschlossen wird.

    – Tamara Wijsmann

    14. April 2012 um 12:51 Uhr

  • Nein, geht auch nicht; Scheint, dass der Browser keine Absätze in voller Breite unterstützt, es sei denn, Sie geben eine Höhe an. Damals funktionierte es, aber jetzt scheint es wieder kaputt zu sein. Der Hintergrund scheint jedoch eine Art Neuberechnung einzuführen; sich fragen was es wird aber neu berechnet, scheint es nicht zu sein block beim Versuch. Interessant…

    – Tamara Wijsman

    14. April 2012 um 12:58 Uhr


Benutzer-Avatar
Dan Cruz

Nachdem Sie auf dieses Problem gestoßen sind, Kombinieren von Meta-Ansichtsfenster und Medienabfragen bot die einfachste Lösung. Nur hinzufügen <meta name="viewport" content="width=device-width" /> zu dem in der Frage bereitgestellten Quell-HTML wurde die Anzeige im Android-Browser (unter Verwendung eines virtuellen Android 4.2-Geräts) korrigiert. Zitat des obigen Links:

Normalerweise nimmt das Layout-Ansichtsfenster eine Breite ein, die der Anbieter als optimal für die Anzeige von Desktop-Sites festgelegt hat.

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

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

Ich schlage Ihnen daher vor, die Methode .height() in jQuery oder einem anderen js-Framework zu verwenden, um die tatsächliche Höhe der zu berechnen <p> und um bei fly einen Inline-Stil hinzuzufügen. Es ist ziemlich unauffällig.

Ich hoffe, ich war hilfreich.

  • Sie wollen nicht berechnen, was Ihr Browser für Sie tun soll, sehen Sie sich meine Antwort an, um zu sehen, wo das Problem lag. Es wäre nur ein Fehler, wenn der CSS-Standard erklären würde, dass der Textkörper standardmäßig 100 % breit sein sollte, aber ich bin zu belästigt, um das zu überprüfen …

    – Tamara Wijsmann

    4. März 2012 um 23:17 Uhr

Benutzer-Avatar
surfealakesea

Für Android- und kleine Bildschirme im Standardnavigator wird dem Absatz die Gerätebreite als p->max-width genommen.

In meinem Fall habe ich mit Viewport 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- und Gerätebreitenhöhen.

  • Sie wollen nicht berechnen, was Ihr Browser für Sie tun soll, sehen Sie sich meine Antwort an, um zu sehen, wo das Problem lag. Es wäre nur ein Fehler, wenn der CSS-Standard erklären würde, dass der Textkörper standardmäßig 100 % breit sein sollte, aber ich bin zu belästigt, um das zu überprüfen …

    – Tamara Wijsman

    4. März 2012 um 23:17 Uhr

Benutzer-Avatar
FxIII

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

Denken Sie daran, dass der Darstellungsbereich für Mobilgeräte oft eine Breite von etwa 1000 Pixel (möglicherweise 1024) aufweist, während der Bildschirm kleiner ist. Wenn Sie 100 % angeben, verwendet der Browser möglicherweise die Bildschirmbreite, nicht die Breite des Darstellungsbereichs. Auf diese Weise können Sie mit dblclick to text den Absatz automatisch ohne Umfließen an den Bildschirm anpassen. Wahrscheinlich ist dieses Verhalten auf das P-Tag beschränkt und kann als konsistent zur Semantik von p betrachtet werden.

  • Nur zu Ihrer Information, Header-Elemente (h1) sind ebenfalls betroffen.

    – Oliver Salzburg

    30. März 2012 um 9:28 Uhr

  • YMMV Wenn Sie eine andere Version des Browsers oder andere Einstellungen haben, lesen Sie die Antwort von mcottingham.

    – Tamara Wijsmann

    4. Oktober 2012 um 11:12 Uhr

1049050cookie-checkWarum spannt der Android-Browser diesen Absatz nicht über die gesamte Browserbreite?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy