Android Autofit-Modus verursacht Probleme mit CSS-Breite in Web-Seite

Ich habe Probleme mit der Auto-Resize-Funktion des Android-Browsers. Die Breiten auf meiner Seite gehen ein bisschen Haywire, wenn das Gerät im Hochformat ist.

Was ich gerne machen möchte, ist

  • Markieren oder unterstreichen Sie den ausgewählten TabPageIndicator
  • "BadParcelableException: ClassNotFoundException beim Unmarshalling <myclass>" bei der Verwendung von Parcel.read-Methode, die ein ClassLoader als Argument hat
  • Fehler beim Auflösen: com.facebook.android:facebook-android-sdk:4.4.0
  • In Android, wie man Navigationsschublade Header Bild und Namen programmgesteuert in der Klassendatei setzen?
  • Wie kontrolliere ich den Android WebView History / Back Stack?
  • Android: Ungültige Verwendung von SingleClientConnManager: Verbindung noch zugewiesen
    • Habe die gleiche Version der Website für Desktop und mobile Benutzer.
    • Lassen Sie den Benutzer ein- und auszoomen, wie sie wollen.

    Ich habe derzeit folgendes in meinem Kopf

    <meta name="viewport" content="width=1100"> 

    Ich habe den folgenden Blog-Post gefunden, der mein Problem beschreibt.

    Dies wird definitiv durch das Auto-Fit-Layout ("kLayoutFitColumnToScreen" im Android WebKit-Quellcode) verursacht. Probieren Sie einfach den Test mit Auto-Fit deaktiviert und alles ist korrekt gerendert (zumindest auf meinem Android-Gerät).

    Der Auto-Fit-Modus auf Android scheint die Breite der Elemente zu verringern, ohne ihre Positionierung zu beeinflussen, oder die Positionierung anderer Elemente. Also, wenn Sie einen Block mit Breite haben: 1000px und Text, der 100% dieser Breite überspannt, kann der Container 1000px breit bleiben, aber der Text in ihm wird an der Bildschirmbreite wickeln.

    Http://www.quirksmode.org/blog/archives/2009/09/css_width_unrel.html

    Gibt es eine Möglichkeit, diesen Autofit-Modus zu stoppen? Ich möchte das Zoomen nicht deaktivieren.

    Aktualisieren:

    Ich suche immer noch nach einer Lösung, wenn jemand von einem weiß.

    Haben Sie jemanden mit dem gleichen Problem gefunden (obwohl sie Tabellen verwenden)

    Gespannte Spalten kollabieren auf Android-Web-Browser (bei der Verwendung von Auto-Fit-Seiten)

    Http://code.google.com/p/android/issues/detail?id=22447&can=4&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars

  • Nicht in der Lage, Push-Benachrichtigung Sound in Android
  • Android: Rundfunkempfänger für Bildschirm auf und Bildschirm aus
  • Gradle-Befehle fehlgeschlagen API 23 Google API Emulator Bild (armeabi-v7a)
  • Android App mit Webview / Javascript. Was kann sicher sein?
  • Wie man Werte aus Bündel in Android extrahiert
  • Mapbox GL mit externen Karten
  • 13 Solutions collect form web for “Android Autofit-Modus verursacht Probleme mit CSS-Breite in Web-Seite”

    Ich habe dieses Problem erlebt und eine Lösung gefunden, die für mich arbeitet.

    Ich habe ein Haupt <div> mit einigen verschachtelten <div> Elementen innen. Das HTML ist sehr einfach. Ich fand, dass ein <div> in meinem Haupt <div> seinen Text wickeln würde, als ob ich den Text doppelt geklopft hätte, um ihn zu vergrößern. Diese <div> enthielt nur Text. Dieses Verhalten trat nur in Hochformat auf und wurde nach Doppelschneiden oder Umschalten der Orientierung korrigiert.

    Da dieses Problem ein Android-Bug ist, kann kein CSS oder HTML es wirklich beheben. Allerdings hat das folgende CSS das Problem zufriedenstellend für mich gelöst; Und ich musste nicht "Auto-fit Seiten" ausschalten:

    Ich habe dem <div> ein CSS- background-image hinzugefügt. Ich habe gerade eine transparente, ein-Pixel-PNG als Hintergrund verwendet.

    div { background-image: url(../img/blank.png); }

    Nur die Antworten weiter, die für mich mit einem wichtigen Vorbehalt gearbeitet haben: Die Neuzeit in IE8 macht die 1×1 transparente Pixel-Methode unbrauchbar auf dieses Ziel auf einer annehmbaren Größe Leinwand.

    Da CSS kann nicht erkennen, Auto-Fit, oder Android-Browser (Chrom auf Android scheint sowieso gut), war mein Workaround zu

    1. Ziel kleinere Geräte (seit IE8 neigt dazu, Desktop zu sein), und
    2. Nur die relevanten 'p' -Tags ansprechen (Autofit zielt nur auf einige 'p' -Tags), also wenn wir dieses Update nur dort anwenden, wo es gebraucht wird, halten wir die Reduzierung der Performance-Effekte so gering wie möglich.

    Mein Workaround (basierend auf Demets Antwort oben):

     /* work around mobile device auto-fitting */ @media only screen and (max-device-width: 800px) { #content p { background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==); background-repeat:repeat; } } 

    Auf meiner Website '#content' ist wo die 'p' tags wohnen, die automatisch eingebaut werden, natürlich musst du das ändern. "Körper" wird funktionieren, ja, aber je spezifischer desto niedriger die Auswirkungen auf die Neuzeit.

    Es lohnt sich, in einem Portrait-only-Erkennungsmodus hinzuzufügen, da Auto-Fit scheint nicht auf die Landschaft gerichtet zu sein – aber ich habe es nicht auf genügend Geräten getestet, um zu bestätigen, dass dies immer wahr ist.

    Ich wollte nur bestätigen, dass Delbert's Lösung das einzige war, was für mich gearbeitet hat. Es ist nicht ganz klar, warum das funktioniert, aber es funktioniert. Ich habe einige ziemlich erschöpfende Suche auf die Frage getan, und die Links von Tom's Original Post scheint über alle da ist da draußen gehören.

    Für das, was es wert ist, habe ich einige ziemlich aggressive Versuche versucht, die Breite einiger <p> -Tags zu korrigieren, die tief in einer Kette von <div> -Tags unter Verwendung einiger der vorgeschlagenen Lösungen hier verschachtelt sind:

    * { background-color: transparent; } * { background-color: transparent; } Hat nicht für mich gearbeitet Allerdings * { background-image: url("/image/pixel.png"); DID Arbeit für mich (wo pixel.png ist ein 1×1 transparent PNG). Ich entspannte mich schließlich, um mich nur auf meine verschachtelten <p> -Tags anzuwenden und fand, dass meine Absätze endlich die beabsichtigte, richtige Breite überspannten.

    Ich habe auch bestätigt, dass das Verhalten ein Ergebnis der Einstellung "Auto-Fit Webseiten" ist. Ich besitze kein Android, aber erlebt diese Probleme mit dem Emulator.

    Nochmals vielen Dank an Delbert für den Tipp.

    Selbes Problem hier. Der Inhalt in meinen <p> -Tags wird nach links geschlagen. Keine gute Lösung gefunden, aber ich habe festgestellt, dass, wenn ich eine Hintergrundfarbe zu meinem <p> -Tag hinzufüge, "das Problem beheben". Ich bin immer noch versuchen, eine echte Fix zu finden, obwohl das Hinzufügen einer Hintergrundfarbe ist nicht ideal.

     *{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)} 

    Ja, es scheint, dass Android 4.x in Ursache ist. Wirklich ärgerlich, weil es das Standardverhalten ist! Es zerstört alle meine Webseiten …

    Ich habe im Moment keine Lösung gefunden. Das richtige Verhalten ist, um den Text mit der Breite des Bildschirms anzupassen, wenn Sie doppelt auf den Bereich tippen . Es scheint, dass diese Funktion auch dann aktiv ist, wenn sie nicht gezoomt ist.

    Ich füge einfach ein transparentes png-Bild als wiederholten Hintergrund hinzu. Dies funktioniert auch für H1, H2, H3 … Tags, die von demselben Schmalspaltproblem geplagt zu sein scheinen. Durch die Verwendung eines transparenten png erlaubt es mir, immer noch eine Hintergrundfarbe zuzuordnen oder zu zeigen, was hinter dem Element steht. Das ist nicht perfekt, aber es ist die einfachste Lösung, die ich gefunden habe, die sich nicht auf einen browser-spezifischen Hack verlassen hat und in allen anderen mobilen Browsern, die ich gesehen habe, gut funktioniert.

    Obwohl ich das gleiche Verhalten auf SPAN-Tags auch bemerkt habe, und das oben genannte scheint nicht für dieses Element zu arbeiten … seltsam!

    Geben Sie Width in% anstelle von px, wie width:100%;

    Ich habe fast das gleiche Problem mit p-Tags und li's sind sie viel kleiner als die umliegenden Container, aber nur mit Android 4.x. Mit Android 2.3.x und Android 3.x "Auto-Fit-Seiten" hat keinen negativen Nebeneffekt.

    Scheint, dass sie versucht haben, etwas zu verbessern, aber es hat besser gearbeitet, das ist nervig.

    Dies scheint ein Programmierproblem mit Android zu sein. Aber in deinem mobilen Browser unter Einstellungen => Erweitert deaktiviere die Auto-Fit-Seiten und das kann gelöst werden. Aber wir wollen nicht, dass unsere Benutzer bleiben. Also für den Augenblick ein einfacher Hack, um ein transparentes Hintergrundbild zu platzieren, sollte nicht als vorübergehende Lösung ausgeschlossen werden. Mit Drupal als Framework und Omega als mein reaktionsfähiges Thema und wissend, dass meine Layout-Regionen und äußere DIVs auf {display: block width: 100%} eingestellt sind, hat das für ein paar Minuten Nüsse gemacht. Aber das transparente Bild funktionierte gut.

    Ich setze eine Min-Breite und eine Breite auf dem td, wo meine E-Mail-Inhalte lebt und funktioniert jetzt gut in Android gmail App, wo Versionen Autofit-Modus verwenden.

     <!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Gmail Issue</title> </head> <body> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td width="50%" valign="top"></td> <td width="1100" valign="top" style="min-width:1100px;"></td> <td width="50%" valign="top"></td> </tr> </table> </body> </html> 

    Eine Sache ist sicher, die Auto-Fit 'Feature' verursacht viel graues Haar für Entwickler.

    Ich löste das Problem, indem ich ein transparentes Bild, 1 Pixel hoch und 650 Pixel breit (die Breite meiner E-Mail) an der Spitze meiner E-Mail.

    Sogar mit Auto-Fit aktiviert meine E-Mail jetzt rendern, wie es sein soll.

     <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td width="100%" valign="top" bgcolor="#ffffff" style="padding-top:20px"> <!-- HERE'S THE MAGIC --> <table width="650" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="1"> <img src="spacer.png" width="650" height="1" style="width:650px; height:1px;" /> </td> </tr> </table> <!-- END THE MAGIC --> <!-- Start Wrapper--> <table width="650" border="0" cellpadding="0" cellspacing="0"> <tr> <td > REST OF EMAIL HERE </td> </tr> </table> <!-- End Wrapper--> </td> </td> </table> 

    Durch das Hinzufügen eines Hintergrundbildes zu Ihrem CSS wird die automatische Anpassung deaktiviert.

    Andere Plakate haben vorgeschlagen, einen einzigen Pixel transparenten Hintergrund hinzuzufügen, aber Sie können tatsächlich nur ein leeres Hintergrundbild an die Spitze Ihres CSS-Stylesheets hinzufügen und die zusätzliche http-Anfrage überspringen und neu zeichnen.

      div, p { background-image: url(); } 

    Ich habe es in meinem Emulator und meiner Galaxy SII getestet und es scheint, dasselbe zu arbeiten, wie das Hinzufügen einer tatsächlichen URL.

    Das Android ist ein Google Android Fan-Website, Alles ├╝ber Android Phones, Android Wear, Android Dev und Android Spiele Apps und so weiter.