Optimierung für das Smartphone
Ninie
- css
Hallo ihr Lieben,
habe die Aufgabe eine Webseite zusätzlich für die Darstellung auf dem Smartphone zu optimieren.
Hierzu habe ich eine 2. CSS Datei erstellt und das Layout angepasst.
Habe die Maße des iPhones genommen für die Anpassung.
Auf folgender Seite bei SELFHTML habe ich eine Einstellung (handheld) gesehen und für meine Seite verwendet.
http://de.selfhtml.org/css/formate/einbinden.htm
Bei mir sieht es in der HTML-Datei jetzt so aus:
<link rel="stylesheet" media="screen" href="layout_pc.css" />
<link rel="stylesheet" media="handheld" href="layout_sp.css" />
Bisher weiß ich, dass meine Seite auf dem iPhone nicht als handheld-Version angezeigt wird. Leider habe ich zusätzlich das Problem, das ich selbst kein Smartphone besitze und daher was das Prüfen angeht nicht so flexibel bin. :-/
Kann mir da irgendjemand bezüglich des Skriptes HTML/CSS weiterhelfen? Das wäre super, denn es ist wirklich wichtig...
LG Ninie
@@Ninie:
nuqneH
Bisher weiß ich, dass meine Seite auf dem iPhone nicht als handheld-Version angezeigt wird.
Vergiss "handheld". "media queries" sind dein Suchbegriff. http://www.w3.org/TR/css3-mediaqueries/
Qapla'
Hi,
habe die Aufgabe eine Webseite zusätzlich für die Darstellung auf dem Smartphone zu optimieren.
Hierzu habe ich eine 2. CSS Datei erstellt
Fragwürdiger Ansatz.
<link rel="stylesheet" media="screen" href="layout_pc.css" />
<link rel="stylesheet" media="handheld" href="layout_sp.css" />Bisher weiß ich, dass meine Seite auf dem iPhone nicht als handheld-Version angezeigt wird.
Was media+handheld angeht haben die SmartPhone-Hersteller den Entwicklern einen Strich durch die Rechnung gemacht - und ignorieren es oftmals, wohl aus Angst, dass die Nutzer darüber „abgespeckte“ Seiten vorgesetzt bekommen könnten, und den Unterschied zur gewohnten Darstellung im Desktop-Browser dem SmartPhone anlasten könnten ...
Kann mir da irgendjemand bezüglich des Skriptes HTML/CSS weiterhelfen?
CSS Media Queries wären das zu bevorzugende Stichwort.
Wenn du bei der zwei-Stylesheets-Variante bleiben willst, dann wirst du vermutlich serverseitiges User-Agent-Sniffing betreiben müssen. Welche Nachteile und Unzuverlässigkeiten das mit sich bringt, bitte recherchieren.
MfG ChrisB
@@ChrisB:
nuqneH
CSS Media Queries wären das zu bevorzugende Stichwort.
Wenn du bei der zwei-Stylesheets-Variante bleiben willst, dann wirst du vermutlich serverseitiges User-Agent-Sniffing betreiben müssen.
?? Media-Queries kann man auch im @media-Attribut des 'link'-Elements einsetzen.
Aber vermutlich ist es sinnvoller, _ein_ Stylesheet zu pflegen als mehrere.
Qapla'
Hi,
?? Media-Queries kann man auch im @media-Attribut des 'link'-Elements einsetzen.
Danke, das war mir noch nicht bekannt.
MfG ChrisB