Problem Webseitendarstellung auf Chrome (Android, Nexus 7)

[DTC]

Hallo allerseits,

ich hoffe, das Thema gehört hier rein (ansonsten bitte ins Tablet-Forum verschieben).
Es geht um folgendes:
Ich habe eine eigene Webseite ( http://www.sn-lan.de ). Diese hat eine Breite von ca. 1100 Pixeln.
Wenn ich die Seite auf meinem Nexus 7 mit dem Chrome-Browser anschaue, dann wird die Seite nicht komplett dargestellt, sondern irgendwie leicht gezoomt. Am rechten Rand fehlen ein paar Zentimeter, so dass dort nur ungefähr die Hälfte der rechten Spalte dargestellt wird.
Erst wenn ich mittels Geste das Bild etwas verkleiner, wird die Webseite komplett dargestellt. Beim Klick auf einen Link fängt das Spiel jedoch wieder von vorn an. Gleiches gilt auch für das angebundene Forum.

Jetzt ist die Frage, warum das so ist. Das Nexus 7 hat ja bekanntlich eine Auflösung von 1280x800. Somit müsste die Webseite ja eigentlich ohne Probleme in voller Breite dargestellt werden können. Ich habe schon im Internet gesucht, ob man da evtl. irgendwas für mobile Geräte optimieren kann (z.B. Meta-Tags Viewport usw.), aber das hat irgendwie alles nicht geholfen bzw. ich habe nix vernünftiges dazu gefunden.

Ich will meine Webseite jetzt auch nicht komplett umbauen, nur damit sie mit mobilen Geräte kompatible ist - aber mich würde schon interessieren, wo das Problem liegt: bei meiner Webseite oder eher doch beim Nexus 7 bzw. beim Chrome.


PS:
Auf nem iPad2 hier in der Firma wird die Webseite richtig in voller Breite dargestellt...


Gruß DTC

 

[Madman1209]

Hi,

das mit den Meta-Tags scheint mir eigentlich kein schlechter Ansatz zu sein. Hast du sowas mal probiert:

<meta name="viewport" content="width=240, height=320, user-scalable=yes, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0" />

Würde mich interessieren, ob das klappt, wenn du da deine gewünschte Breite und Höhe verwendest, ggf. auch mal an den "scales" spielen.

Hast du im Chrome mal probiert "Desktop Version anfordern"?

VG,
Mad

 

[DTC]

Mein derzeitiger Meta-Eintrag lautet:

<meta name "viewport" content "width=device-width, initial-scale=1.0, user-scalable=yes" />

Allerdings hat der nix gebracht.
"Desktop-Variante anfordern" habe ich zwar probiert, allerdings bringt das ja nix, da es von meiner Webseite keine mobile Version gibt

Ich weiß nicht, ob feste Höhen- und Breitenangaben im viewport-meta etwas bringen. Leider kann ich das erst zuhause ausprobieren... Allerdings stand im Internet, dass es besser ist, als Breite device-width anzugeben - so soll es mit jedem Gerät kompatible sein...

 

[Madman1209]

Hi,

also ich habe eine Seite für mein Galaxy Note optimiert und mich auf diese Aussage berufen, die ich irgendwo gefunden habe, und verwendet - funktioniert bei mir so tadellos.

VG,
Mad

 

[DTC]

Ok, ich werde es mal zuhause ausprobieren.

Mich würde ja mal interessieren, ob andere Nexus-Nutzer das Problem auch haben ?


edit:
Ich sehe gerade, dass Computerbase das auch so gemacht hat:
<meta name="viewport" content="width=950" />

edit2:
Ich habe jetzt mal meine Webseite und das Forum entsprechend angepasst.
Falls zufällig jemand mit nem Nexus 7 unterwegs ist und den Chrome drauf hat, kann er ja mal testen, ob es jetzt richtig angezeigt wird.
Ich kanns wie gesagt erst heute abend testen...

Danke

 

[Madman1209]

Hi,

habe ein Galaxy Note, darauf klappt es noch nicht. Du hast aber scheinbar auch nicht sowas wie "user-scalable=yes, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0" angegeben. Das würde ich mal noch machen, gerade den initial-scale...

VG,
Mad

 

[DTC]

Ok, ich habs entsprechend geändert...
Probiers bitte noch mal

 

[Daaron]

Besser als Viewport-Deklarationen wäre direkt der Weg über CSS Media Queries.
1.) Verpass der Seite ein Holy Grail Layout, bei dem die Content-Spalte vor den Seiten-Spalten im Quelltext erscheint
2.) Verzichte auf display:table-row & Co. Löse es über Floats und prozentuale Breiten
3.) Passe die Floats an die Bildschirmbreite an. Ab einer gewissen Breite kann man einfach keine 3 Spalten mehr machen, dann packt man den Kram schlichtweg untereinander. Deshalb sollte man auch Holy Grail verwenden.

 

[DTC]

Hallo Daaron,

ähm... meine Webseite ist mit Joomla gemacht und das Template ist ein fertiges/gekauftes (welches ich nur hier und da ein wenig angepasst habe).
Ich bin kein PHP-HTML-CSS-Guru und somit habe ich gerade mal knapp die Hälfte von dem verstanden, was du mir da geschrieben hast Ich glaube, deine vorgeschlagenen Änderungen gehen deshalb weit über das hinaus, was ich im Stande bin zu leisten, bzw. was mit Joomla bzw. dem Template möglich ist - es sei denn, jemand gibt mir da eine etwas detailliertere Anleitung...
Ich müsste mich jetzt erst mal im Internet informieren, was z.B. ein Holy Grail Layout ist...

Wie gesagt, ich möchte meine Webseite jetzt nicht komplett umkrempeln, nur damit ich sie auf meinem Tablet vernünftig anschauen kann... Ich dachte, es gibt da ein paar einfachere Möglichkeiten...

Ergänzung (18. Dezember 2012)

@alle
Ich glaube, der Grund für mein Problem steht hier:
http://www.hardweb.com.au/nexus7viewportportrait603x797landscape966x444.html
Das Nexus 7 hat zwar eine Auflösung von 1280x800, aber die maximale Viewport-Breite beträgt im Landscape-Modus nur 966 Pixel.

Eine eventuelle Lösung für das Problem steht wohl hier:
http://stackoverflow.com/questions/...exus-7-display-resolution-not-working-in-code
Aber das muss ich mir heute abend erst mal genauer anschauen...

 

[Daaron]

Der Heilige Gral des Seitenlayouts ist nix anderes, als eine clevere Strukturierung der Elemente.

Eine der üblichen Anforderungen ist doch: 3 Spalten, links und rechts jeweils feste Breiten (z.B. für Navi, News, Facebook-Timeline, Twitter,...) und in der Mitte ein Content mit idealerweise variabler Breite.
Die einfache Variante, das umzusetzen, wäre jetzt

<aside id="left">Linke Spalte</aside>
<aside id="right">Rechte Spalte</aside>
<section id="main">Contentspalte</section>

wobei #left n float:left, #right n float:right und #main ne linke und rechte Margin entsprechend der Breite der Spalten hat.

Suchmaschinentechnisch ist das aber schonmal Grütze. Je höher etwas im Code steht, desto wertvoller ist es für Suchmaschinen. Außerdem, wenn man mit Mediaqueries dynamisch von "3 Spalten" auf "2 Spalten und n bisschen mehr Fuß" oder "eine Spalte, alles untereinander" umschalten will, dann muss die Reihenfolge #main -> #left -> #right lauten.

DAS sauber, kompakt und crossbrowser-fähig hin zu bekommen ist der Heilige Gral.

 

[DTC]

Ich hab das ganze jetzt erstmal auch ohne den heiligen Gral zum laufen bekommen - zumindest wird die Webseite jetzt komplett auf meinem Nexus 7 angezeigt.
Folgenden Meta-Tag habe ich dazu genutzt:

<meta name="viewport" content="target-densitydpi=device-dpi, width=1100, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />

Ist zwar sicher nicht die beste Lösung, aber wahrscheinlich die einfachste...
Das Problem an der ganzen Sache ist, dass Chrome anscheinend die Option "initial-scale" nicht umsetzt, so dass ich gezwungen bin, mit maximum-scale das Zoomen zu unterbinden. Wenn ich maximum-scale z.B. auf 3 setze, dann wird die Webseite wieder zu groß dargestellt, so dass man rauszoomen muss.
Durch maximum-scale=1.0 unterbinde ich aber das Zoomen komplett, so dass man nicht in die Webseite reinzoomen kann - die Option user-scalable=yes ist somit eigentlich nutzlos.

Ich werde das später nochmal mit einem anderen Android-Browser durchtesten...
Kann mir da jemand einen guten empfehlen ?

 

[Daaron]

Wenn mich nicht alles täuscht ist Meta Viewport ein HTML5-Attribut. Dafür hat deine Seite aber schlichtweg den falschen Doctype (XHTML 1.0 Transitional).

Die Seite ist eh ein Sammelsurium an Fehlern: http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0

Eine Umstellung auf den HTML5-Doctype (<!DOCTYPE html>) würde 1-2 der Fehler entsorgen. Den Rest solltest du mal Stück für Stück abarbeiten.

 

[DTC]

Mit dem HTML5-Doctype habe ich dann 35 Fehler...

Die 10 Fehler beruhen fast alle auf eingebundene externe Scripte (Paypal-Button, WallpaperOfTheDay) oder auf eingebauten Erweiterungen (z.B. ExtraVote) - die Chance, hier was zu ändern ist eher gering, wenn es da keine Updates gibt.
Und was den RSS-Fehler angeht - RSS wird von Joomla generiert, auch hier kann ich eher wenig machen.

Da ich wie gesagt kein PHP-HTML-Guru bin, muss ich mich auf ein fertiges CMS verlassen, wenn ich eine einigermassen vernünftig zu pflegende Webseite haben möchte. Meine Wahl ist dabei auf Joomla gefallen, auch wenn sich da die Geschmäcker unterscheiden.
Es ist ja auch keine professionelle Webseite, mit der man Geld verdienen will - es ist nur eine private Webseite...

Ich schaue mir allerdings mal die Fehler an und werde sehen, ob ich durch Updates oder kleinere Codeänderungen was bewirken kann.