Handy Ansicht völlig unbrauchbar

[NetAktiv]

Hallo, eigentlich bin ich mit meiner Seite http://Rainer-Rosenberger.de ganz zufrieden was die Ansicht auf Desktop und Tablet (10'' von Lenovo) angeht. Nun wollte die Seite erweitern, um auch für kleinere Mobilgeräte nutzbar zu werden. Aber schon die erste Ansicht auf meinem Android 4.1 Handy Cynus T2 (Screen 854x480) mit dem Android Standard Browser bzw. Chrome brachte völlig unterschiedliche und unbefriedigende Ergebnisse. Obwohl die Schrift auf dem Desktop mit den Entwicklertools eine Größe (16px inheritet von div=used mit font-size:12pt) hat, werden verschiedene Sektionen auf dem Handy mit völlig unterschiedlichen Schriftgrößen angezeigt. So lange ich dieses Problem nicht gelöst habe, will ich erst gar nicht beginnen, weiter zu versuchen, eine Mobilversion zu erstellen. Was muss ich tun, damit zumindest die Schrift auf allen Geräten in allen Bereichen zumindest gleich groß ist (ob die richtige Größe ist erst mal unwichtig).

 

[windoof]

Schau die mal das an: http://holdirbootstrap.de/
Verwende ich in allen aktuellen Projekten.

 

[LeCub]

Um eine responsive (auf allen Geräten gut zu benutzende) Seite zu erstellen, muss man auch responsives Webdesign können.

1. Ich kann keinen <meta name="viewport" ...> entdecken, ohne den ist responsives Webdesign nicht responsiv.
2. Du verwendest keine Media queries, welche aufgrund des fehlenden viewport tags auch gar nicht geladen werden würden.
3. Man verwendet heutzutage keine Tabellen mehr für das Layout, dies würde sich auch nur mit großer Mühe responsiv darstellen lassen.

Ich hab keine Ahnung wie du es geschafft hast deine Seite für Tablets zu optimieren, aber wenn du eine moderne, auf allen Bildschirmgrößen darstellbare Website haben möchtest. Solltest du modernes HTML, CSS sowie responsives Webdesign lernen.

Schau die mal das an: http://holdirbootstrap.de/
Verwende ich in allen aktuellen Projekten.

Ich glaube nicht dass Bootstrap ihm weiterhilft, es sei denn er lernt HTML 5 da dies schon die Vorrausetzung für Bootstrap ist

 

[NetAktiv]

@Windooof: Ich will nur meine eigene Homepage etwas besser für den mobilen Zugriff machen. Dazu muss ich erst mal die prinzipiellen Probleme verstehen, bevor ich mich in ein mehr oder weniger komplexes Framework einarbeite.

@LeCub:

1. Wie gesagt, erst will ich verstehen, warum es im Moment so komisch aussieht, dann kommt die Anpassung.
2. Eben, ich sagte ja, das habe ich später vor. Für das Tablet habe ich nichts gemacht, das hat eine Screen von 1024 und damit werden die Seiten gut angezeigt.
3. Das mit den Tabellen ist mir bekannt, aber wenn ich beispielsweise aus der Startseite mir die Kommunikationshinweise Telefon, Fax und Email ansehe, dann ist das eine Tabelle und kann somit auch als Tabelle kodiert werden. Dennoch habe ich mal, um Tabellen als Ursachen auszuschließen, alle Tabellen auf der Startseite entfernt und durch <div> mit float ersetzt. Das Ergebnis war wie folgt:

• Der Android Standard Browser füllt nach wie vor im unteren Bereich nur die halbe linke Seite mit Text.
• Chrome sieht nun etwas besser aus (siehe neuen Screenshot)-

Den Hinweis auf das lernen von HTML 5 verstehe ich nicht. Ich will weder Grafiken neu erstellen noch plözlich Multimedia einbinden und ansonsten ist das von mir derzeit noch verwendete XHTML strenger von der Syntax her als HTML5. Außerdem ist HTML5 weitestgehend aufwärts kompatibel zu HTML4. Wenn ich also meine Seite umstellen müsste/sollte, dann wäre das noch das kleinste Problem.

Fazit: Der bei mir installierte Standardbrowser hat einfach eine Macke. Irgendwie merkt er sich von einem oberen DIV die width und weder spätere clear noch width:100% ändern das. Der Chrome ist das wesentlich besser, aber in DIV mit festen Breitenangaben in px wird die Schrift nicht oder anders gezoomt. Das Hauptproblem sind also feste Breitenangaben bei Block-Elementen, die nebeneinander angeordnet werden.

Ich werde mal weiter testen, eventuell kommt man da mit Prozent-Angaben weiter oder man braucht am Ende doch ein anderes Design und ordnet diese Blöcke auf mobilen Geräten doch anders (unter- statt nebeneiander) an.

Grüße, Rainer

 

[LeCub]

Ok interessant wäre es zu erfahren, welche Android-version du hast. Ansonsten habe Ich möglicherweise gerade den Fehler gefunden: Im Quellcode deiner Seite ist ganz unten dieser Text:

 <div style="float:left; width:680px;">  
        Senden Sie E-Mail mit Fragen oder Kommentaren an: <a href="mailto:[email protected]">[email protected]</a><br/>
        <a href="/index.php?page=impressum">Impressum</a>, Copyright &copy; 1998-2015, Dr. Rainer-Rosenberger - Neufahrn
    </div>

Das letzte Element in HTML darf nicht gefloatet sein ohne ein gecleartes unter sich zu haben. Dadurch wird das gesamte Layout durcheinander geworfen. Versuch mal, unter den Container einen leeren Container mit clear:both zu setzen. Vielleicht bringt das etwas

 

[NetAktiv]

Hallo LeCub,

ich habe das Clear-Div eingefügt, allerdings ohne weiteren Effekt. Leider finde ich nicht, wie man den Browser Cache löschen kann, eventuell ist die Änderung auf dem Handy nicht aktiv (was ich aber nicht glaube). Angeblich geht das Cache Löschen bei den Einstellungen unter Datenschutz & Sicherheit, aber bei mir mit Android 4.1.1 gibt es nur Sicherheit. Der HTML Validatior sagt auf jeden Fall, die Seite ist OK.

Grüße, Rainer

 

[NetAktiv]

Mir ist nun aufgefallen, dass ich mit dem Standard Browser auf dem Tablet (Android 4.2.2, Auflösung 1280x800) das gleiche Problem habe, wenn ich das Tablet hochkant stelle. Quer sieht die Seite gut aus, nach dem Drehen wird die rechte Seite dann nicht mehr durchgehend für Text benutzt. Bei Chrome ist das auch beim Tablet anders, da klappt es hochkant und quer, allerdings ist auch das Zoomen hochkant auch nicht sonderlich befriedigend. Es liegt also wohl wirklich daran, dass irgend eine width in der Seite breiter als der Screen ist. Dann fängt der Browser scheinbar das spinnen an.

 

[Tronjer]

Was genau hindert dich daran, dem oben angeführten Bootstrap-Link zu folgen und die Seite responsiv umzubauen? Dann klappt es auch mit Android.

 

[windoof]

Ich glaube nicht dass Bootstrap ihm weiterhilft, es sei denn er lernt HTML 5 da dies schon die Vorrausetzung für Bootstrap ist

Wo ist das Problem mit HTML5? Wie NetAktiv schon festgestellt hat, ist das wohl das kleiste Problem. Macht eher alles einfacher ;)

@Windooof: Ich will nur meine eigene Homepage etwas besser für den mobilen Zugriff machen. Dazu muss ich erst mal die prinzipiellen Probleme verstehen, bevor ich mich in ein mehr oder weniger komplexes Framework einarbeite.

Die Bedenken kann ich dir nehmen. Bootstrap ist nicht im Geringsten ein komplexes Framework. Das Wichtigste ist, dass du das Grid-System ( http://holdirbootstrap.de/css/#grid ) verstehst, alles andere kommt dann von selbst. Für den Grundaufbau von Seiten gibt es beispiele, bei denen du dich bedienen kannst: http://holdirbootstrap.de/los-gehts/#examples

 

[NetAktiv]

Klar kann Bootstrap meine Probleme lösen, muss aber nicht, wie die auf http://holdirbootstrap.de/los-gehts/#download gefundene Bemerkung zeigt:

Android Stock Browser
Statt Chrome zu verwenden, kommt bis Android 4.1 (und anscheinend auch bei einigen neueren Versionen) die sogenannte Internet-App als Standard-Browser auf Android-Geräten. Leider ist dieser Browser von Fehlern und Unstimmigkeiten in Bezug auf CSS allgemein behaftet.

Die bisherigen Beobachtungen legen es doch nahe, dass der Browser das Hauptproblem ist, denn ob mit oder ohne Bootstrab müsste man doch sonst das geschilderte Problem lösen können. Im Moment möchte ich einfach mal probieren, wie weit ich komme, ohne mich (wie wenig komplex auch) in ein neues Framework einzuarbeiten und die komplette privat betriebenen Seiten wegen einer Hand voll Handy-Besuchern komplett umzuschreiben. Außerdem kommt man meist bei jedem Framework auch mal an Grenzen und wenn man dann die Hintergründe nicht versteht, dann kommt man da auch nicht weiter. Bootstrap mit dem Grid Layout Ansatz ist sicher eine tolle Sache, aber für mich im Moment ein Overkill. Ich will erst mal verstehen, wie unterschiedlich sich mobile Geräte zu Desktops benehmen und versuchen, mit möglichst wenig Aufwand meine Seiten etwas lesbarer zu machen.

 

[MrMurphy]

Hallo

mit möglichst wenig Aufwand meine Seiten etwas lesbarer zu machen

Diese Fehleinschätzung ist genau das Problem. Um Webseiten "auf mobilen Geräten" vernünftig darstellen zu können müssen die Grundlagen stimmen.

Das ist bei deinen Webseiten aber leider nicht der Fall. Die waren zum Erstellungszeitpunkt bereits veraltet und müssen deshalb komplett überarbeitet werden. Du kannst zwar etwas herumpfuschen, das wird aber nur zu immer weiteren Problemen führen und im Endeffekt bei viel mehr Zeitaufwand zu unbefriedigenden Lösungen führen.

Um Bootstrap vernünftig anwenden zu können sollten gute HTML-/CSS-Kenntnisse vorhanden sein und zusätzlich muss man sich in Bootstrap einarbeiten. Für Webauftritte sind in der Regel Anpassungen beim CSS erforderlich, die ohne Grundlagen das Bootstrap-CSS stören können.

Ein Vorteil hingegen ist, dass Bootstrap die Webseitenerstellung einschränkt, zum Beispiel durch das Grid-System. Damit kommen viele Anfänger eher zurecht, die in der Regel noch dem Papierdenken verhaftet sind.

Gruss

MrMurphy

 

[NetAktiv]

Ich habe meine Seite vor etwa 4 Jahren komplett umgebaut von damals HTML2 auf 100% validiertes XHTML. Dabei habe ich wider besseres Wissen auf ein paar Ratschläge verzichtet und daher nach wie vor ein paar Tabellen zum Layout verwendet und etliche style-Angaben im HTML bei den Elementen und nicht in einer externen Style-Datei. Meine Idee war eigentlich, nun auf HTML5 umzustellen und diese beiden Faulheitspunkte nachzuarbeiten und dann mit einer zweiten (oder dritten) Style-Datei für mobile Geräte eine für mich ausreichend gute Darstellung zu erhalten.

Völliges Umschreibenm mit Einarbeiten in ein Framework mag zwar sinnvoll sein, da ist mir aber der notwendige Aufwand für eine handvoll Besucher nicht wert. Ich wollte hier auch keine Grundsatzdiskussion führen, sondern wissen, warum die Darstellung so komisch war und das weiß ich mittlerweile:

1. Ein Bug im alten Android Standardbrowser schränkt die Breite bei gewissen Layouts auch ohne Tabellen über die gesamte Seite ein.
2. Prinzipiell zoomen die Browser auf mobilen Geräten je nach Display-Größe und Lage eigenmächtig und da führen scheinbar Blöcke mit fester Lage und Breite zu Problemen, wenn man man die Schriftgrößen nicht entsprechend anpasst.

Für mich ist das Thema nun hinreichend behandelt. Mal etwas über die Architektur von Bootstrap nachzulesen war auch interessant.

Grüße, Rainer

 

[MrMurphy]

Hallo

dann mit einer zweiten (oder dritten) Style-Datei für mobile Geräte

Autsch. Das hat sich nicht bewährt und gilt auch bereits als veraltet. Zumal "mobile Geräte" sich schlicht nicht definieren lassen.

Gruss

MrMurphy

 

[NetAktiv]

Autsch

Ja so etwas ähnliches habe ich mir schon gedacht :), dass man mit diesem Ansatz bald an die Grenzen kommt. Aber für meine Ansprüche würde es vermutlich zunächst mal ausreichen, zumal dann schon eine viel deutlichere Trennung zwischen Daten und Layout benötigt. Ein Punkt hat mir besonders Sorgen bereitet (und da sehe ich auch bei Grid-Layout keine wirkliche Lösung), und das ist mein derzeit oben angeordnetes Menü. Würde man das auf einem Handy fließend machen, so dass es mehrzeilig wird. Die momentane gezoomte Anzeige ist da ja völlig unbrauchbar, so kleine Finger hat kein Mensch.

Zwei Beispiele noch für mobile Geräte, die mir auffielen. Bei http://www.onlinetvrecorder.com/ gibt es eine extrem breite Seite für TV Programme, die wird auf dem Tablet durch Zoom so winzig, dass man sie manuell größer zoomen muss. Klickt man dann einen Link an, dann hat man wieder das winzige. Das ist absolut nervig und sicher nicht professionell, also ein negativ-Beispiel.

Auf dem Spieleserver http://playOk.com hat man auf mobilen Geräten ein völlig anderes Layout, als auf dem Desktop. Man sieht mobil nur bestimmte Bereiche, die dann den gesamten Bildschirm einnehmen. Durch Klicken von Controls kommt man dann in andere Bereiche. Sehr übersichtlich ist dann das jeweils sichtbare, aber man muss wissen, dass es da auch noch mehr gibt.