Webdesign für Mobilgeräte

[socki]

Hallo,

ich habe festgestellt, dass es bei meiner Website auf ganz bestimmten Devices Darstellungsfehler gibt. Wie geht man da bei der Fehlersuche vor? Gibt es Tools wie Firebug auch für mobile Browser?

Das Problem besteht darin, dass der Text nicht den gesamten Container für den Inhalt ausfüllt, sondern in der Mitte umbricht.

Bisher habe ich immer alles was CSS angeht am Rechner mit Chrome, FF und IE getestet und mir für andere Browser online ein paar Browsershots angeschaut. Hat soweit immer geklappt. Aber wie macht man es richtig? Komme da irgendwie nicht weiter...

LG

[M.]

Mahlzeit,

Gibt es Tools wie Firebug auch für mobile Browser?

Umgekehrt. Du kannst mobile Devices auf dem PC nachbilden. Wenn es nur um die Viewport-Grösse geht, gibt es von mir eone Lösung im Wiki

Desweiteren bietet z.B. Chrome einige Optionen zur Emulation und wenns richtig ans Eingemachte geht, ist Ripple evtl. was für dich. Die Einbindung in Chrome ist recht passabel.

[Der Martin]

Hallo,

[...] ist Ripple evtl. was für dich.

durchaus, ja. Am besten mit Sauerkraut und Kartoffelpü. ;-)

Mahlzeit,
 Martin

[socki]

Umgekehrt. Du kannst mobile Devices auf dem PC nachbilden. Wenn es nur um die Viewport-Grösse geht, gibt es von mir eone Lösung im Wiki

Auflösung scheint nicht das Problem zu sein. Das hatte durch Snapshots von der Seite browserstack.com 6 mobile Browser identifiziert, die das erwähnte Darstellungsproblem haben. Die meisten davon kann man auch mit Chrome emulieren. Nur klappt dort die Darstellung einwandfrei.

Also habe ich es nochmal mit Ripple versucht (Danke für den Tipp!). Da steht zwar nur eins der Devices zur Verfügung, bei denen der Snapshot eine fehlerhafte Darstellung gezeigt hatte (Galaxy Nexus). Aber auch mit Ripple konnte ich den Fehler nicht reproduzieren. Sieht alles super aus, egal welches Device ich einstelle.

Da auch mein eigenes Handy (LG P700) die Seite fehlerhaft darstellt, weiß ich dass das Problem real ist und nicht nur ein Fehler der browserstack.com Shots. Also was klappt da beim emulieren nicht? Womit kann ich noch versuchen, den Fehler zu reproduzieren? ...außer 10 Handys kaufen und durchprobieren :)

[M.]

Mahlzeit,

Also was klappt da beim emulieren nicht? Womit kann ich noch versuchen, den Fehler zu reproduzieren?

Mal ehrlich, glaubst du wirklich, dass kann dir irgendjemand beantworten?
Dazu müsstest du schon einen Link zur Problemseite zur Verfügung stellen. Sollte aber auch klar sein, das.

[socki]

Mal ehrlich, glaubst du wirklich, dass kann dir irgendjemand beantworten?
Dazu müsstest du schon einen Link zur Problemseite zur Verfügung stellen. Sollte aber auch klar sein, das.

Hatte gedacht, dass mir nur das richtige Tool fehlt. Aber da es wohl doch nicht so einfach ist - hier der Link zu den Screenshots: http://www.browserstack.com/screenshots/4de40692da6c97803b6ed8adeabe48764f1ce699

...bitte die Website dann einfach ergooglen. Danke!

Als Beispiel für ein Problem-Device kann man sich zB den Screenshot zum Galaxy Nexus (2. Reihe) anschauen. Das ließ sich glaub ich auch in Ripple emulieren.

[mark]

Als Beispiel für ein Problem-Device kann man sich zB den Screenshot zum Galaxy Nexus (2. Reihe) anschauen. Das ließ sich glaub ich auch in Ripple emulieren.

Ich würde mal auf folgendes tippen:

Du setzt nirgends die Breite deiner <p> - Elemente, also macht der Browser selbst, was er für richtig hält.

Probiers mal zu Versuchszwecken mit:

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

oder

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

... nur um zu kontrollieren, ob dies tatsächlich das Problem ist.

Es wäre auch nützlich, wenn du den Browsertyp samt Versionsnummer angeben könntest. Das Smartphone-Modell ist bei der Problemlösung nicht wirklich hilfreich.

lg
mark

[socki]

Probiers mal zu Versuchszwecken mit:

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

oder

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

Bringt leider beides nichts :(

Es wäre auch nützlich, wenn du den Browsertyp samt Versionsnummer angeben könntest. Das Smartphone-Modell ist bei der Problemlösung nicht wirklich hilfreich.

Bei browserstack.com sieht man leider den jeweiligen Browser nicht (warum eigentlich?). Mein eigener ist der Android Browser 4.0

[mark]

Bringt leider beides nichts :(

Cache haste hoffentlich geleert, bevor du die Seite betrachtet hast?
Ansonsten Schade.

Was mir meine Glaskugel dann noch rät, wäre folgende Zeile, die ich in deinem Quelltext vermisse, zu deinem Code hinzuzufügen. Vielleicht ist der Browser ja dahingehend empfindlich.

<meta name="viewport" content="width=device-width" />

Dann bin ich aber mit meinem Latein am Ende.

Bei browserstack.com sieht man leider den jeweiligen Browser nicht (warum eigentlich?). Mein eigener ist der Android Browser 4.0

Nur zur Info: Android Browser 4.0 ist von 2011. Ich hab's mit 4.4.x probiert und die Darstellung funktioniert.

[Auge]

Hallo

Nur zur Info: Android Browser 4.0 ist von 2011. Ich hab's mit 4.4.x probiert und die Darstellung funktioniert.

Nur zur Info: Dein abstellen auf das Alter des Browsers hilft nicht weiter, da die Hersteller Updates nur in homöopatischen Dosen herausgeben. Das Problem mag sich allerdings rein statistisch irgendwann erledigen, weil die Geräte größtenteils außer Betrieb gehen.

Tschö, Auge

[mark]

Nur zur Info: Dein abstellen auf das Alter des Browsers hilft nicht weiter, da die Hersteller Updates nur in homöopatischen Dosen herausgeben. Das Problem mag sich allerdings rein statistisch irgendwann erledigen, weil die Geräte größtenteils außer Betrieb gehen.

Es handelt sich hier -mit an Sicherheit grenzender Wahrscheinlichkeit- um ein Browserproblem.

Und ... nur um das Ganze mal historisch einzustufen:
Wenn man bedenkt, dass Google sein erstes Smartphone 2010 auf den Markt gebracht hat und es 2011 den ersten mobilen Firefox für Android gibt, dann sagt das (Browser von 2011) doch einiges über die möglichen Bugs des benutzten Browsers aus. Das war noch die Zeit, als es von einigen Web-Developern hieß, sie würden für iPhone Entwickeln und sich nicht um Android Browser kümmern...

[Auge]

Hallo

Nur zur Info: Dein abstellen auf das Alter des Browsers hilft nicht weiter, da die Hersteller Updates nur in homöopatischen Dosen herausgeben. Das Problem mag sich allerdings rein statistisch irgendwann erledigen, weil die Geräte größtenteils außer Betrieb gehen.

Es handelt sich hier -mit an Sicherheit grenzender Wahrscheinlichkeit- um ein Browserproblem.

Ja eben. Warum glaubst du, dass sich das Problem beheben lässt, wenn es für das Betriebssystem und damit für den Browser keine Updates gibt? Die meisten der Benutzer wissen nichts von den spärlich vorhandenen Updates, geschweige denn von Alternativen wie Cyanogen Mod und mit alternativen Browsern lässt sich auf vielen der Geräte aufgrund der Hardwareausstattung nichts anfangen. Solange diese Geräte in Betrieb bleiben, bleiben somit auch die Fehler. Wie man als Seitenanbieter damit umgeht, steht auf einem anderen Blatt.

Tschö, Auge

[socki]

Es handelt sich hier -mit an Sicherheit grenzender Wahrscheinlichkeit- um ein Browserproblem.

Hmm, dass der Fehler nur bei bestimmten Browsern auftritt kann ich bestätigen. Wenn ich nämlich bei browserstack neue Screenshots anfordere kommen jedesmal andere Ergebnisse raus. D.h. die Darstellung funktioniert teilweise bei Devices, bei denen es vorher einen Fehler gab und umgekehrt. Muss also damit zusammenhängen, mit welchem Browser der Screenshot gemacht wurde (-> http://www.browserstack.com/screenshots/4a530c1ae85c5e633ccff08097b458e97d8292ce). Allerdings waren diesmal 7 von 12 Screenshots fehlerhaft. Deshalb würde ich es nicht als Browserproblem bezeichnen. Selbst wenn die alle mit dem Android Browser 4.0 unterwegs sein sollten, scheint er ja immernoch sehr verbreitet zu sein. Also liegt es doch am Websitebetreiber, dem Browserverhalten gerecht zu werden. Bei anderen Websites funktioniert's ja schließlich auch.

[Auge]

Hallo

Hmm, dass der Fehler nur bei bestimmten Browsern auftritt kann ich bestätigen. Wenn ich nämlich bei browserstack neue Screenshots anfordere kommen jedesmal andere Ergebnisse raus.

Wenn der Fehler mal auftritt und mal nicht, dann hätte *ich* nicht den Browser im Verdacht.

D.h. die Darstellung funktioniert teilweise bei Devices, bei denen es vorher einen Fehler gab und umgekehrt.

Nun schon mal garnicht, wenn es doch alle oder zumindest viele Browser mal doch und mal wieder nicht betrifft.

Selbst wenn die alle mit dem Android Browser 4.0 unterwegs sein sollten, scheint er ja immernoch sehr verbreitet zu sein.

Es sollen noch etwa 15% der Android-Geräte mit Android 2.3 oder gar 2.2 laufen. Das ist zwar rückläufig, weil die Geräte irgendwann den Weg alles irdischen gehen, noch sind sie aber da.

Also liegt es doch am Websitebetreiber, dem Browserverhalten gerecht zu werden. Bei anderen Websites funktioniert's ja schließlich auch.

Grundsätzlich ja, auch wenn das Grenzen hat. So manche Funktion, die mit aktuellen Browsern einfach umsetzbar ist, läuft auf alten Browsern nur mit Handständen oder garnicht. Funktionieren soll die Seite dennoch.

Damit sie das zukünftig tut, sollte die Seite zuvörderst fehlerfrei sein. Nun weiß ich nicht, wie dein Wordpress-Template zusammengestöpselt wird. Der HTML-Validator zeigt aber satte 112 Fehler und 4 Warnungen an. Auch der CSS-Validator meckert reichlich (104 Fehler, 107 Warnungen).

Manches ist herstellerspezifischen Angaben (Präfixe (z.B. „-moz-“, „-webkit-“); IE-Angaben („filter“)) geschuldet – die drinnen bleiben können –, vieles aber tatsächlichen Fehlern, die zu beheben sind. Ungültige Eigenschaften (z.B. „*display:inline;“), Selektoren, Schachtelungen, etc. pp., alls Dinge, die du bitte behebst, bevor wir hier weiter nach Browserfehlern suchen.

Tschö, Auge

[socki]

Wenn der Fehler mal auftritt und mal nicht, dann hätte *ich* nicht den Browser im Verdacht.

Warum denn nicht? Kann es nicht sein, dass bei Browserstack ein Screenshot beispielsweise vom Galaxy Nexus mal mit dem einen und mal mit nem anderen Browser erstellt wird. Zumindest beim Cross Browser Testing (weiß nicht genau, ob das auch auf die Screenshot Funktion zutrifft) wird angeblich darauf geachtet die Browser und Browserversionen zu variieren (-> http://www.browserstack.com/question/479)

Also habe ich das Ganze mal bei crossbrowsertesting.com versucht weil man dort nach Browser/Browserversion selektieren kann. Das Ergebnis: Bisher sind NUR die Screenshots vom Android Browser 4.0 fehlerhaft (da das aber alles nur im Schneckentempo geht, konnte ich nur ein paar wenige Browser testen)

Manches ist herstellerspezifischen Angaben (Präfixe (z.B. „-moz-“, „-webkit-“); IE-Angaben („filter“)) geschuldet – die drinnen bleiben können –, vieles aber tatsächlichen Fehlern, die zu beheben sind. Ungültige Eigenschaften (z.B. „*display:inline;“), Selektoren, Schachtelungen, etc. pp., alls Dinge, die du bitte behebst, bevor wir hier weiter nach Browserfehlern suchen.

Ich hab ja nie bestritten, dass ich was am CSS machen muss. Eigentlich wollte ich auch nur wissen, ob es eine Möglichkeit gibt, die jeweils greifenden CSS Regeln für einen ausgewählten mobilen Browser zu untersuchen. Also so wie es zb mit Firebug für den jeweils installierten Firefox geht.

[M.]

Mahlzeit,

wird angeblich darauf geachtet die Browser und Browserversionen zu variieren (-> http://www.browserstack.com/question/479)

Wenn die das machen, dir aber nicht anzeigen, welche Browser genutzt wird, ist der Service fürn Arsch. Was soll ich mit nem Bild wenn ich nicht weiss, welcher Browser?

Ich hab ja nie bestritten, dass ich was am CSS machen muss. Eigentlich wollte ich auch nur wissen, ob es eine Möglichkeit gibt, die jeweils greifenden CSS Regeln für einen ausgewählten mobilen Browser zu untersuchen. Also so wie es zb mit Firebug für den jeweils installierten Firefox geht.

Installier die Android SDK und nutze den Browser von Version 2.2 oder 2.3

Davor entferne aber die Fehler. Man lackiert ja auch nicht erst ein Auto und repariert die Bremsen erst nach einem Unfall.

[Auge]

Hallo

Wenn der Fehler mal auftritt und mal nicht, dann hätte *ich* nicht den Browser im Verdacht.

Warum denn nicht? Kann es nicht sein, dass bei Browserstack ein Screenshot beispielsweise vom Galaxy Nexus mal mit dem einen und mal mit nem anderen Browser erstellt wird.

Dann ist, wie m. bereits schreib, der Service nicht zu gebrauchen.

Zumindest beim Cross Browser Testing (weiß nicht genau, ob das auch auf die Screenshot Funktion zutrifft) wird angeblich darauf geachtet die Browser und Browserversionen zu variieren (-> http://www.browserstack.com/question/479)

Warum? Die Frage, welches OS benutzt wird, ist, bis auf die Stockbrowser von Android bzw. iOS irrelevant. Das Rendering von z.B. Firefox unterscheidet sich innerhalb einer Version ja auch nicht jenachdem, ob ich ihn unter Windows (in den div. Versionen) oder Linux nutze.

Also habe ich das Ganze mal bei crossbrowsertesting.com versucht weil man dort nach Browser/Browserversion selektieren kann. Das Ergebnis: Bisher sind NUR die Screenshots vom Android Browser 4.0 fehlerhaft (da das aber alles nur im Schneckentempo geht, konnte ich nur ein paar wenige Browser testen)

Ist dieser Browser bei jedem Test betroffen oder wieder nur gelegentlich?

Manches ist herstellerspezifischen Angaben (Präfixe (z.B. „-moz-“, „-webkit-“); IE-Angaben („filter“)) geschuldet – die drinnen bleiben können –, vieles aber tatsächlichen Fehlern, die zu beheben sind. Ungültige Eigenschaften (z.B. „*display:inline;“), Selektoren, Schachtelungen, etc. pp., alls Dinge, die du bitte behebst, bevor wir hier weiter nach Browserfehlern suchen.

Ich hab ja nie bestritten, dass ich was am CSS machen muss.

Gut, dann mache das bitte. Das erleichtert dir die anschließende Fehlersuche erheblich (wenn ich hier Text unterstreichen könnte, hätte ich eben „erheblich“ unterstrichen).

Eigentlich wollte ich auch nur wissen, ob es eine Möglichkeit gibt, die jeweils greifenden CSS Regeln für einen ausgewählten mobilen Browser zu untersuchen. Also so wie es zb mit Firebug für den jeweils installierten Firefox geht.

Genau dazu kann ich dir nichts sagen, mir reicht für den groben Überblick die Firefox-eigene Bildschirmgrößen-testen-Funktion in Kombination mit FireBug. Den unerwünschten Rat solltest du im Sinne deines Nervenkostüms dennoch beachten.

Tschö, Auge

[Der Martin]

Hi,

Die Frage, welches OS benutzt wird, ist, bis auf die Stockbrowser von Android bzw. iOS irrelevant. Das Rendering von z.B. Firefox unterscheidet sich innerhalb einer Version ja auch nicht jenachdem, ob ich ihn unter Windows (in den div. Versionen) oder Linux nutze.

der Aussage stimme ich in der Theorie zu, in der Praxis nicht. Auch hier im Forum hatten wir schon öfters Berichte über Browserbugs von Firefox (oder IE), die nur in bestimmten Windows-Versionen auftraten. Sobald die Anzeige am Bildschirm betroffen ist, hat das OS (bzw. dessen GUI-Subsystem) durchaus einen Einfluss auf bestimmte Effekte - auch wenn die Browserversion sicher das dominierende Kriterium ist.

Sobald also (vermeintliche) Rendering-Fehler auftauchen, die jemand anders auf seinem System nicht sofort nachstellen kann, _muss_ neben der Frage nach der genauen Browserversion auch die nach dem verwendeten Betriebssystem/GUI kommen.

So long,
 Martin

[socki]

Genau dazu kann ich dir nichts sagen, mir reicht für den groben Überblick die Firefox-eigene Bildschirmgrößen-testen-Funktion in Kombination mit FireBug.

Ok, ich seh's ein. Das was ich gesucht habe, scheint es wohl tatsächlich nicht zu geben.

Und den Rat, alle CSS Fehler zu beseitigen muss ich dann wohl auch bald mal in die Tat umsetzen. Blöderweise stammen die Fehler zum Großteil von verschiedenen Wordpress Plugins. Wenn ich die fixe, geht alles mit dem nächsten Update wieder verloren. Ich muss also auf die Plugins ganz verzichten oder mühsam bei jedem Update die CSS Dateien neu bearbeiten...

[socki]

Cache haste hoffentlich geleert, bevor du die Seite betrachtet hast?
Ansonsten Schade.

Ja!

<meta name="viewport" content="width=device-width" />

Leider auch kein Erfolg.

Nur zur Info: Android Browser 4.0 ist von 2011.

Gut zu wissen. Ich werd mal auf den neusten Chrome Browser umsteigen.

[Ole]

Hi

Wie geht man da bei der Fehlersuche vor? Gibt es Tools wie Firebug auch für mobile Browser?

Es gibt das eine oder andere Tool, das dir da helfen kann.

• Google Chrome kann mittlerweile Remote Debugging

• oder du schaust dir im Chrome einfach so den Sourcecode an

• Adobe Edge Inspect

• Für JS-Debugging gibt es http://jsconsole.com/

• Im Play Store gibt es einige Apps die dir den Sourcecode anzeigen können

Gruß
Ole

[socki]

Es gibt das eine oder andere Tool, das dir da helfen kann.

Dir auch Dankeschön für die zahlreichen Tipps!

Remote Debugging löst mein Problem nicht, da es nur mit Chrome arbeitet. Habe festgestellt, dass mein Handy die Seite mit Chrome fehlerfrei darstellt. Mit dem Standardbrowser aber leider nicht.

Edge Inspect probier ich gerade noch aus. thx

[socki]

Hallo nochmal,

ich bin bei dem Darstellungsproblem ein Stückchen weiter gekommen. Es hat wohl nicht direkt was mit dem Theme bzw den zahlreichen CSS Fehlern zu tun. Der Android Browser 4.0 gibt dem p-Tag eine viel zu geringe Breite. Und zwar IMMER UND AUCH OHNE SÄMTLICHE CSS VORGABEN. Hier mal der Code, auf's allernötigste reduziert:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<style type="text/css">  
html, body, p { width: 100%; display: block; margin: 0px; padding: 0px; }  
</style>  
</head>  
<body>  
<p>  
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam  
</p>  
</body>  
</html>

Und hier die Screenshots dazu: http://app.crossbrowsertesting.com/public/if5f3783e63165e2/screenshots/z99248bb0a1793ab0038

Ich habe den oben genannten Code mehrmals getestet. Unter 2 verschiedenen Domains, auch ohne caching. Und der Android 4.0 Browser stellt es immer mit reduzierter Breite dar. Alle anderen Browser dagegen nie.

Leider habe ich noch nicht rausgefunden, wie man das Problem umgehen kann. Bei den meisten Websites, die ich getestet habe, ist die Darstellung mit dem Android 4.0 auch fehlerhaft. Darunter auch spiegel.de oder selfhtml.org. Es scheint aber zu gehen. Bei de.wikipedia.org siehts gut aus.

[Ole]

Hi

Der Android Browser 4.0 gibt dem p-Tag eine viel zu geringe Breite. Und zwar IMMER UND AUCH OHNE SÄMTLICHE CSS VORGABEN. Hier mal der Code, auf's allernötigste reduziert:

Es geht weder aus deiner Beschreibung, noch aus den Screenshots nicht hervor: Ist es wirklich das P-Element oder ist es eines der Elternelemente die zu schmal dargestellt werden?
Bzw. hast du überprüft ob es nicht ein Elternelement oder der Viewport ist, dass zu schmal dargestellt wird?

Zum Testen: "box-sizing" für alle Elemente auf "border-box" und jedem Element einen Rahmen geben, je nach Position in der Hierarchie in einer anderen Farbe.

Gruß
Ole