Mobile-Seite, WebAlias und Viewport

[almay]

Also, ich versuche gerade mit eine Internetseite zu basteln. Soweit, so gut, schließlich habe ich auch etwas Erfahrung mit HTML, CSS, etc. Allerdings reicht mein Wissen leider nicht sonderlich Tief wie ich feststellte, als ich versucht habe eine Version meiner Seite für mobile Endgeräte zu erstellen und auch das allmächtige Google konnte mir bis dato nicht weiterhelfen. Zu meinem Problem:

Wie ich inzwischen gelernt habe nutzt man im Meta Tag am besten viewport um die Seite an die Größe des jeweiligen Displays anzupassen. Das sieht bei mir dann so aus:

<meta http-equiv="Content-Type" name="viewport" charset="utf-8" content="width=device-width, initial-scale=1" />

Nach etwas herumgefrickel hat das dann auch alles ganz gut geklappt. Nun habe ich bei meinem Web Hoster ein WebAlias für die mobile Seite erstellt, damit die Adresse etwas schöner aussieht. Auch das klappt problemlos, nur leider wird die Seite dann nicht mehr richtig angezeigt. Es scheint, als ob die richtige Bildschirmgröße nicht mehr erkannt wird und alle Texte werden unglaublich klein dargestellt, so als es sich nicht um eine mobile Seite handelte.

Rufe ich die index.html direkt auf, dann klappt alles problemlos, über den WebAlias aber nicht.
Kann jemand etwas mit dem Problem anfangen und im besten Fall mir auch weiterhelfen?
Ich habe mir inzwischen so beholfen, dass ich anstatt des WebAlias ein WebForwarding eingestellt habe, sodass man nach wie vor die etwas schönere Adresse eingeben, bzw. speichern kann, dann aber die hässliche Langadresse angezeigt bekommt sobald man auf der Seite ist. Das ist zwar ein annehmbarer Kompromiss, so ganz glücklich bin ich damit aber nicht.

Für Hilfe wäre ich sehr dankbar!

 

[threadi]

Was verstehst Du unter einem WebAlias? Ein Link zu beiden Adressen wäre sicherlich von Vorteil.

 

[almay]

WebAlias bedeutet, dass dem Browser eine andere als die eigentliche Adresse vorgespielt wird.

In meinem Fall ist die eigentliche Adresse der mobilen Seite:
http://www.digitalmints.com/mobile/index.html

Durch den WebAlias befindet sich exakt diese Seite nun auch hinter einer anderen Adresse. Ursprünglich wollte ich, diese Adresse nehmen:
http://m.digitalmints.com

Da es nicht funktioniert hat, habe ich nun erst einmal ein Forwarding eingerichtet, so dass man bei Aufruf von m.digitalmints.com automatisch auf die eigentliche Adresse weitergeleitet wird.

Zu Vergleichszwecken habe ich zusätzlich noch einen WebAlias erstellt und zwar unter der Adresse:
http://mobi.digitalmints.com.

Beim Aufruf der oberen beiden Adressen wird die mobile Seite korrekt angezeigt, beim Aufruf der unteren Adresse nicht, obwohl ja der exakt selbe Quellcode angefragt wird. Irgendwie sorgt der WebAlias dafür, dass die Erkennung des Bildschirms nicht richtig funktioniert. Vielleicht wird "device-width" falsch interpretiert. Aber ich weiß schlicht nicht genug über diese Meta Befehle, was da genau im Hintergrund passiert und was hier schief laufen könnte.

Soweit ich das verstehe sorgt der Viewport Modus normalerweise dafür, dass nicht die Auflösung als Grundlage für die Größenberechnung benutzt wird, da in Zeiten von winzigen HD Displays dies zu unleserlich kleinen Zeichen führen würde. Stattdessen wird auf eine praktikable Zeichengröße gegangen die das System bereitstellt. Beim Aufruf meiner Seite über den Web Alias scheint aber genau das nicht zu passieren, so wie es eben wäre, wenn ich keine Viewport Einstellung vorgenommen hätte.

 

[threadi]

Nein, unter http://mobi.digitalmints.com/ hast Du nicht exakt den selben Quellcode. Diese Adresse verweist auf ein Frameset. Und Framesets behindern die Darstellung per meta-viewport. Das ist der Grund wieso dort die mobile Darstellung nicht funktioniert.

Tipp: bleibe bei einer einzigen URL sowohl für die mobile wie auch für die Desktop-Variante deiner Webseite, verwende keine Alias-Domain (so würde ich sie nennen), Weiterleitung und erst recht kein Frameset.
Alternativ dazu könntest Du auch alles über eine URL laufen lassen und per mod_rewrite eine Erkennung des zugreifenden Gerätes einbauen. Wenn es ein mobiles Gerät ist, dann leitest Du auf die mobile Seite weiter, aber ohne die URL zu ändern.

 

[almay]

Danke für die Antwort. Ich hätte selbst einmal auf die Idee kommen sollen mir den tatsächlichen Quelltext anzuschauen anstatt immer nur mit meinem Editor zu arbeiten. Offensichtlich ist das eine Einstellung des Web Hosters und ich kann auch keine Möglichkeit finden dies zu ändern.

Die Seite ist jedenfalls organisch gewachsten und hat sich aus mehreren Testseiten und Experimenten ergeben, daher war es nicht so ohne weiteres möglich die selbe URL zu benutzen, da es mit verschiedenen Stylesheets und Skripten nicht getan war.

Aber ich denke, ich werde sie bald von Grund auf neu bauen und alles etwas geordneter angehen, dann wäre es in der Tat am besten die selbe URL zu verwenden.

 

[Tronjer]

Die Seite ist jedenfalls organisch gewachsten und hat sich aus mehreren Testseiten und Experimenten ergeben, daher war es nicht so ohne weiteres möglich die selbe URL zu benutzen, da es mit verschiedenen Stylesheets und Skripten nicht getan war.

Da reicht sogar ein einziges Stylesheet. Wenn du die Seite neu bauen willst, setze dich vorab mit Begriffen wie media queries und pixel-ratio auseinander und verwende ein Template wie Bootstrap. Der Unterschied bei Darstellungen auf mobilen Endgeräten, respektive den unterschiedlichen Browsern und Betriebssystemen ist erheblich größer als auf dem PC.