Ninie: Optimierung für das Smartphone

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

  1. @@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'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
  2. 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

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
    1. @@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'

      --
      Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
      (Mark Twain)
      1. Hi,

        ?? Media-Queries kann man auch im @media-Attribut des 'link'-Elements einsetzen.

        Danke, das war mir noch nicht bekannt.

        MfG ChrisB

        --
        RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?