Responsive Template zeigt nur Desktop-Layout

[Snooty]

edit: des Rätsels Lösung: diese Zeile im Header einfügen:

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Hio,

ich hab dieses Template gefunden, das eigentlich responsive sein soll: http://www.styleshout.com/demo/?theme=keepitsimple

Ruft man obigen Link am Handy auf, wird auch korrekt das mobile Layout genutzt. Schließt man aber den oberen schwarzen Frame (details & download), dann wird auf dem Handy auch das Desktop-Layout genutzt: http://www.styleshout.com/templates/preview/KeepItSimple20/




Sieht jemand, woran das liegt? Eigentlich wird doch in beiden Fällen dasselbe Stylesheet geladen.

Hab den Ersteller schon angeschrieben, aber da es ein kostenloses Template ist, gibt's leider keinen Support.

Download: http://www.styleshout.com/download/keep-it-simple/

 

[AndrewPoison]

Wie groß ist die Auflösung deines Handys?
Laut Media-Query bricht die Seite unterhalb von 768px Breite um. Ein Full-HD-Display ist da schon drüber. Aber auch niedriger aufgelöste Displays, wenn es sich dafür um High-DPI-Displays (Retina & Co) handelt.

 

[Mr. Black]

Androids und iPhones browsen aber immer in einer recht geringen Auflösung und skalieren die Inhalte dann hoch. Wenn auf Websites die Auflösung erkannt werden soll (bspw. beim Wallpaper download) kommt auf meinem Handy (FHD) immer irgendwas mit 300p als Auflösung.

Such dir am besten ein Temoplate, welches auf dem (kostenlosen) Bootstrap Framework basiert. Da funktioniert das alles sehr gut und man hat ohne große Kenntnisse schon enorme Möglichkeiten!

 

[Snooty]

Habe hier 768x1024; also wohl gerade 1 Pixel zu viel!?

Aber: auf dem ersten Link klappt es ja auch noch.

Und theoretisch, müsste es doch mit dieser Zeile in der media-queries.css getan sein, wenn ich die 767 auf 768 (oder größer) ändere (was aber nicht hilft):

/* screenwidth less than 768px - mobile/smaller tablets
---------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

@ benzley: ich hab schon so viel Templates getestet - und das ist eines der ganz wenigen, das mir zusagt.

 

[Mr. Black]

Was suchst du denn? Ich habe früher auch nur mit Templates gearbeitet und kenne daher einige gute bzw. gute Quellen

 

[Snooty]

Naja, sowas wie oben

95 % der Templates haben oben einen fetten Banner und viel Platz für Bilder/Gallerien o.ä.
Ich suche was ganz Schlichtes für Texte mit wenigen Abbildungen darin. Meine aktuelle Seite sieht so aus - aber da hab ich kein (vernünftiges) mobiles Layout.


edit: des Rätsels Lösung: diese Zeile im Header einfügen:

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">