Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Blick auf die Uferpromenade in Bremen bei Sonnenuntergang..

      Bremen

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Blick auf die Uferpromenade in Bremen bei Sonnenuntergang..

      Bremen

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » CSS » Media Queries: Mobile Versionen von Websites mit CSS3 erstellen

Media Queries: Mobile Versionen von Websites mit CSS3 erstellen

CSS Media Queries sind ein Thema, das Webdesigner und -entwickler nach wie vor begeistert und frustriert. So nutzen Sie Media Queries, um Ihre Websites fit fürs iPhone, iPad und Android-Geräte zu machen.

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • 11 Kommentare
Lesedauer: 9 Minuten
  • von Gastautor
  • 7. Juli 2010
Bookmarke mich
Share on pocket

Media Queries sind ein Thema, das Webdesigner und -entwickler auch nach über einem Jahrzehnt ihrer Verbreitung in allen Browser begeistert und frustriert. Wir sind begeistert von den Möglichkeiten, die CSS3 uns bietet und welche Probleme wir damit lösen können. Die vorgestellte Lösung wird dort eingesetzt, wo es eine Menge Unterstützung gibt – nämlich auf kleinen mobilen Geräten wie dem iPhone oder alles, was unter Android läuft.

Im folgenden werde ich erklären, wie Sie eine iPhone-Version Ihrer regulären Website mit CSS erstellen können, die schon jetzt funktioniert. Wir schauen uns ein sehr einfaches Beispiel an und ich werde Schritt für Schritt erläutern, wie ich ein Stylesheet für Geräte mit kleinem Display in meine eigene Website eingefügt habe. An dem Beispiel können Sie nachvollziehen, wie einfach es ist, bestehende Websites um zusätzliche Stylesheets für mobile Geräte zu ergänzen.

Media Queries

Wenn Sie jemals ein separates Print Stylesheet erstellt haben, werden Sie mit dem Konzept vertraut sein, wie ein bestimmtes Stylesheet unter gegebenen Bedingungen ins Spiel kommt – um beim Beispiel des Print Stylesheets zu bleiben – eben dann, wenn die Seite gedruckt wird. Diese Aufgabe wird im CSS durch media types geregelt.

media types ermöglichen es Ihnen, die Ausgabe von Stylesheets einem bestimmten Medientyp zuzuordnen.

Die Media Queries in CSS3 greifen dieses Konzept auf und bauen es weiter aus. Anstatt nach einem bestimmten Medium zu schauen, können Sie mit media queries die Eigenschaften und Fähigkeiten von Geräten und Ausgabemedien abfragen. Sie können diese Abfragen dazu verwenden, um alles mögliche zu überprüfen, so zum Beispiel:

  • Breite und Höhe (des Browser-Fensters)
  • Breite und Höhe des Geräts
  • Position – befindet sich das Mobiltelefon im Querformat oder Hochformat?
  • Bildschirmauflösung

Wenn der Anwender einen Browser verwendet, der media queries unterstützt, können wir den CSS-Code ganz gezielt für bestimmte Situationen schreiben. So können Sie abfragen, ob ein Anwender ein kleines Gerät wie ein Smart Phone verwendet und dann ein passendes Layout liefern. Wenn Sie ein entsprechendes Beispiel in Aktion sehen möchten, schauen Sie sich einmal die jüngst frei geschaltete Website der UK Web Conference an. dConstruct setzt auf der neuen Website für die Konferenz 2010 media queries sehr effektvoll ein.

Web-Design - Webseite
So sieht dConstruct 2010 Website auf einem Desktop Computer in Safari aus.o sieht dConstruct 2010 Website auf einem Desktop Computer in Safari aus.
CSS-Hack - Cascading Style Sheets
dConstruct 2010 website auf einem iPhone.

Wie Sie an den beiden obigen Abbildungen sehen, wurde die Website nicht einfach an die Größe des kleineren Displays angepasst, sondern das komplette Layout wurde für den einfachen Zugriff mit einem kleinen Ausgabemedien optimiert.

Viele von Ihnen werden jetzt vermutlich denken, dass dies ein iPhone-Layout ist. Ist es aber nicht. Das Layout wird exakt so auf meinem Android-Mobiltelefon angezeigt. Mit dem Einsatz von Media Queries und dem Abfragen der Geräte-Eigenschaften versorgt die dConstruct-Site alle Arten von Geräten – sogar solche, an die die Entwickler möglicherweise noch gar nicht gedacht haben!

Media Queries zum Erstellen eines Stylesheet für Mobiltelefone verwenden

Wir legen los und schauen uns zunächst ein sehr einfaches Beispiel an. Die folgende Abbildung zeigt ein schlichtes Zweispalten-Layout.

Simple example in a browser
Die Ausgangssituation

Um das Lesen auf einem Telefon zu erleichtern, habe ich mich dazu entschlossen, das komplette Design zu vereinfachen und die Inhalte in einer einzigen Spalte anzuordnen. Weiterhin soll der Header wesentlich kleiner sein, damit die Anwender nicht lange scrollen müssen, bevor sie an die eigentlichen Inhalte gelangen.

Methode 1 – Alternative im Hauptstylesheet

Media Queries können Sie auf verschiedene Weisen verwenden. Eine Methode ist es, den alternativen CSS-Code direkt in das zentrale Stylesheet einzubinden. Um kleine Geräte anzusprechen, verwenden wir die folgende Syntax:

@media only screen and (max-device-width: 480px) {
}

Wir können die alternativen Werte für kleine Displays und Geräte mit geringer Breite innerhalb der geschweiften Klammern einfügen. Indem wir die Kaskade verwenden, können wir ganz einfach alle anderen Deklarationen überschreiben, die wir vorher in unserem CSS-Code für Desktop-Browser notiert haben. Solange dieser Abschnitt an letzter Stelle im Stylesheet steht, werden alle vorhergehenden Regelungen überschreiben.

Um das Layout zu linearisieren und eine kleinere Header-Grafik zu verwenden, füge ich den folgenden Code hinzu:

@media only screen and (max-device-width: 480px) {
     div#wrapper {
     width: 400px;
 }
     div#header {
         background-image: url(media-queries-phone.jpg);
         height: 93px;
         position: relative;
 }
     div#header h1 {
         font-size: 140%;
 }
     #content {
         float: none;
         width: 100%;
 }
     #navigation {
         float:none;
         width: auto;
     }
 }

Im vorhergehenden Code verwende ich ein alternatives Hintergrundbild, reduziere die Höhe des Headers, setze die zuvor für das zweispaltige Layout deklarierten Floats auf none und überschreibe die ursprüngliche Breite. Diese Vorgaben werden nur bei einem Gerät mit kleinem Display angewendet.

Simple example on a phone
So sieht mein simples Beispiel auf einem iPhone aus.

Methode 2 – Link auf separates Stylesheet setzen

Den spezifischen Code für kleine Geräte inline zu notieren, mag ganz gut sein, wenn Sie nur geringüfige Änderungen vorzunehmen haben. Wenn Sie jedoch größere Änderungen vornehmen oder aus Gründen der Übersichtlichkeit die Stylesheets für Desktop-Browser und Browser kleiner Geräte trennen möchten, empfiehlt sich ein Link auf ein separates Stylesheet.

Um ein separates Stylesheet für kleine Geräte nach Ihrem Hauptstylesheet einzufügen und das Kaskadieren zum Überschreiben der Deklarationen zu nutzen, verwenden Sie den folgenden Code:

<link rel="stylesheet" type="text/css" 
media="only screen and (max-device-width: 480px)" 
href="small-device.css" />

Media queries testen

Sofern Sie ein iPhone und/oder ein Android-Handy oder ein anderes Gerät mit einem media-queries-unterstützenden Browser besitzen, können Sie den CSS-Code selbst testen. Allerdings müssen Sie den Code irgendwo hochladen, um ihn anzeigen zu können. Was tun Sie jedoch, wenn Sie die entsprechenden Geräte nicht besitzen und lokal testen möchten?

Online-Dienste nutzen
Eine hervorragende Website, die Sie beim Entwicklungsprozess unterstützt ist ProtoFluid. Im Formular rechts oben können Sie Ihre URL eingeben (kann auch eine lokale sein) und das Design anschließend in einer Vorschau anzeigen, so wie es auf einem iPhone, iPad und einer Reihe anderer Geräte dargestellt würde. Das folgende Bildschirmfoto zeigt die bereits bekannte dConstruct-Site in der iPhone-Vorschau von ProtoFluid.

dConstruct site in ProtoFluid
Die dConstruct-2010-Website in ProtoFluid

Sie können auch Ihre eigene Fenstergröße eingeben, falls Sie die Darstellung Ihrer App oder Website für ein ganz bestimmtest Gerät testen – vorausgesetzt Sie kennen die Abmessungen des Displays.

Unsere weiter oben verwendete Media Query müssen Sie für das Testen mit ProtoFluid ein wenig ändern, um sowohl max-width als auch max-device-width einzubinden. Damit kommt die Medienabfrage auch ins Spiel, wenn ein Anwender einen Desktop-Browser mit einem sehr kleinen Fenster nutzt.

@media only screen and (max-width: 480px),
only screen and (max-device-width: 480px) {
}

Nachdem Sie Ihren Code entsprechend angepasst und die Seite im Browser neu geladen haben, ziehen Sie doch einfach mal das Browserfenster kleiner und schauen Sie, was passiert. Die Regel Media Queries reagiert, sobald der Viewport Ihrem vorgegebenen Wert von 480 Pixeln entspricht.

Das wirklich Schöne an ProtoFluid ist, dass Sie beim Optimieren Ihres Designs auch Tools wie FireBug nutzen können – etwas, worauf Sie verzichten müssen, sobald die Site oder Anwendung auf dem iPhone ist.

Natürlich sollten Sie Ihr Layout auf so vielen verschiedenen Geräten wie möglich anzeigen lassen und ausprobieren. Trotzdem macht ProtoFluid das Entwickeln und Testen wesentlich einfacher.

Hinweis: Wenn Sie vermeiden möchten, dass das Layout Ihrer Website verändert wird, sobald ein Anwender die Größe des Browser-Fensters reduziert, können Sie die Vorgabe für die maximale Breite aus Ihrer Media Query entfernen, bevor Sie die Website frei schalten. So stellen Sie sicher, dass das alternative Layout nur bei der Abfrage mit Browsern kleiner Geräte gezeigt wird, nicht jedoch bei kleinem Viewport von Desktop-Browsern.

Eine bestehende Seite umbauen

Das vorhergehende Beispiel ist sehr einfach gehalten, um die Technik zu demonstrieren. Sie können dieses Beispiel allerdings auch dafür einsetzen, um eine bestehende Website um eine zusätzliche Version für kleine Geräte zu ergänzen. Eines der überzeugendsten Verkaufsargumente für CSS-Layouts war ja gerade die Fähigkeit, alternative Versionen eines Designs zu ermöglichen.

Es folgt ein kleines Experiment mit meiner Firmen-Website, deren Layout ich mithilfe der beschriebenen Technik umbauen werde.

Das Desktop-Layout

Meine Firmen-Website hat zur Zeit ein mehrspaltiges Layout. Die Startseite ist etwas anders gestaltet – ansonsten handelt es sich um drei Spalten mit fester Breite. Das Design ist schon ein paar Jahre alt, so dass wir beim Erstellen Media Queries noch nicht berücksichtigt haben.

edgeofmyseat.com website in Safari on the desktop
Meine Website in einem Desktop-Browser

Das neue Stylesheet einbinden

Da viele Änderungen erforderlich sind, um das Layout zu vereinfachen, werde ich ein separates Stylesheet erstellen und Media Queries dafür verwenden, um das neue Stylesheet nach dem aktuellen Stylesheet zu laden – aber nur dann, wenn die abgefragte maximale Breite weniger als 480 Pixel beträgt.

<link rel="stylesheet" type="text/css" 
media="only screen and (max-width: 480px), 
only screen and (max-device-width: 480px)" 
href="/assets/css/small-device.css" />

Zunächst erstelle ich eine Kopie des bestehenden Stylesheets und speichere sie unter dem Namen small-device.css. Anschließend überschreibe ich Schritt für Schritt bestimmte Regeln und lösche alles, was ich nicht benötige.

Den Header verkleinern

Meine erste Änderung: Das Logo soll auf einem kleinen Display schön dargestellt werden. Da es als Hintergrundbild eingebunden ist, kann ich in diesem Stylesheet ohne Probleme eine andere Bildquelle für das Logo angeben. Zudem verwende ich ein weiteres Hintergrundbild mit einem kürzeren oberen Bereich, über dem das Logo platziert ist.

body {
     background-image: url(/img/small-bg.png);
}
#wrapper {
     width: auto; margin: auto; text-align: left; background-image: url(/img/small-logo.png); background-position: left 5px; background-repeat: no-repeat; min-height: 400px; }

Das Layout linearisieren

Als nächste größere Aufgabe vereinfache ich das Layout und stelle es einspaltig dar. Das Layout für die Desktop-Version wird über floats realisiert. Ich muss daher nur den Parameter der Eigenschaft float auf none setzen und die Breite auf auto. Nun werden die Spalten einfach nacheinander statt nebeneinander dargestellt.

.article #aside {
     float: none;
     width: auto;
}

Aufräumarbeiten

Danach kann es gleich an die Optimierung via ProtoFluid und Firebug gehen. Es sind lediglich kleine Änderungen erforderlich, um Ränder und Innenabstände auf passende Werte zu setzen, da die ursprünglichen Spalten nun untereinander, nicht nebeneinander, angeordnet sind.

Ich erledige das, indem ich innerhalb von ProtoFluid mit Firebug herumspiele, und die Werte so lange ändere, bis ich mit dem Ergebnis zufrieden bin. Anschließend kopiere ich den CSS-Code in das Stylesheet.

The mobile layout on ProtoFluid
Testen und Optimieren via ProtoFluid

Auf dem iPhone testen

Nachdem ich das separate Styhlesheet erstellt und auf den Server hochgeladen habe, möchte ich es natürlich auch auf einem real existierenden Zielgerät testen. Ein Aufruf mit dem iPhone zeigt mir, dass die Website nach wie vor ausgezoomt – über die volle Breite – angezeigt wird, anstatt auf meine gute lesbare einzelne Spalte zu zoomen.

Ein Blick in die Website für Safari-Entwickler gibt mir des Rätsels Lösung. Ein Meta-Tag im Header der Website, das die Breite des Viewports vorgibt, schafft Abhilfe:

<meta name="viewport" content="width=device-width" />

Nach dem Einfügen des Metatags wird die Seite korrekt im einspaltigen Layout auf dem iPhone angezeigt.

edgeofmyseat.com on the iPhone
Dank Metatag sieht die Website nun auch auf dem iPhone gut aus.

An diesem schlichten Umbau können Sie nachvollziehen, wie einfach es ist, Ihrer Website eine mobile Version zu spendieren. Beim Erstellen einer ganz neuen Webpräsenz mit Media Queries würde ich von vornherein etwas anderes vorgehen und auf die folgenden Aspekte achten:

  • geeignete Reihenfolge der Spalten berücksichtigen,
  • so oft wie möglich und wo sinnvoll Hintergrundbilder verwenden, da sie leicht per CSS zu wechseln sind,
  • gegebenenfalls fluid images einsetzen.

In unserem Desktop-Layout gibt es auf der Startseite einen Content Slider für Arbeitsproben. Auf einem Touch-Screen-Gerät ist dieser Content Slider nicht einfach zu bedienen. Daher prüfte ich mithilfe von JavaScript, ob die Größe des Browser-Fensters sehr schmal ist und der Bildwechsler deshalb nicht gestartet wird. Das Script war ohnehin schon so geschrieben, dass der Effekt – das Laden des Sliders zu stoppen, immer dann ausgelöst wird, wenn eine Arbeitsprobe auf dem Bildschirm angezeigt wird. Das schien eine ganz passable Lösung für Anwender mit kleinen Geräten zu sein. Mit etwas mehr Code konnte ich eine alternative Version des Image Sliders für die Anwender mobiler Geräte erstellen, so dass die Art der Interaktion den Gegebenheiten eines Touch Screens besser angepasst ist.

Tutorials und Ressourcen

Obwohl diese Technik noch relativ neu ist, gibt es bereits zahlreiche hervorragende Tutorials zum Einsatz von Media Queries. Wenn Sie weitere gute Tutorials oder Referenzen kennen, posten Sie die Links doch bitte in den Kommentaren.

  • A List Apart – Responsive Web Design
  • Sitepoint CSS Reference – Media Queries
  • Targeting the iPhone 4 Retine Display with CSS3 Media Queries
  • Wordcamp-Session über CSS Media Queries von Michael Jendryschik

Probieren Sie es selbst aus

Der Einsatz von Media Queries ist ein guter Ansatz, um CSS in Ihrer täglichen Arbeit zu verwenden. Denken Sie daran, dass Media-Queries-fähige Browser auch eine Reihe anderer CSS-Eigenschaften unterstützen. In Ihren zusätzlichen Stylesheets für kleine Geräte können Sie daher unbesorgt weitere CSS-Eigenschaften verwenden, um bei Ausgabe auf einem SmartPhone, iPad oder sonstigem mobilen Gerät elegante Effekte zu erzielen.

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 5 / 5. Anzahl Bewertungen: 1

Gastautor

Gastautor

Agenturpartner

Carmen Hurst | Webdesign

Bad Homburg

aeosys

Soest

Rocket Backlinks

Aalen

marketer UX

Düsseldorf

Wee Media | Webdesign Agentur

Dernbach

Alle Agenturpartner

Jobs

Copywriter – Vollzeit

Remote

SEO Manager – Vollzeit

Remote

Projektmanager – Vollzeit

Remote

Inside Sales Manager

Karlsruhe

Junior Webdesigner/ Mediengestalter

Innsbruck

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Alles zu CSS Background-Image (großer Leitfaden mit Codebeispielen)

Mit CSS Background-Image (deutsch: CSS-Hintergrundbild) kann man einem Element ein Hintergrundbild, Hintergrundvideo, eine Hintergrundfarbe oder einen Farbverlauf zuweisen.

 →   

Diese CSS-Selektoren sollten Sie kennen

Im CSS gibt es jede Menge interessanter Selektoren, die versierten Frontend-Entwicklern zwar grundsätzlich bekannt sind, die dennoch oftmals nur sparsam zum Einsatz kommen.

 →   

8 Dropdown-Menüs zum Nachbauen — ohne JavaScript

Wohin mit der Navigation? Diese Frage muss bei eigentlich jedem Webprojekt beantwortet werden. Gerade bei umfangreichen Websites ist es nicht immer einfach, die richtige Antwort darauf zu finden. Besteht eine Webpräsenz aus vielen Seiten und Unterseiten, bietet sich häufig ein Dropdown-Menü an.

 →   

11 Antworten zu „Media Queries: Mobile Versionen von Websites mit CSS3 erstellen“
— was ist Deine Meinung?

  1. Silvio Siefke sagt:
    1. Dezember 2013 um 4:02 Uhr

    Hallo, danke für das Tutorial. Kann man das zentral über ein CSS Stylesheet regeln? Das man erst ein zentrales CSS Sheet lädt und dann je nach Endgerät das entsprechende Sheet gewählt wird?

    if mobile mobile.css else desktop.css

    So in der Art, ich hoffe Ihr versteht was ich meine. Danke.

    Antworten
  2. pudem sagt:
    6. Juni 2013 um 18:12 Uhr

    Das ganze nochmal, offenbar wird hier das größer/kleiner-Zeichen nicht gemocht. Muss man dann selbst hinzufügen:

    Das ganze ist gut und schön, man muss aber bedenken: Wenn man PHP einsetzt, wird der PHP-Code dann ausgeführt, wenn man Variablen Werte zuweist, und zwar auch dann, wenn man den Code in einem Bereich definiert, den man per media queries eigentlich ausgeschlossen hat

    Als Beispiel die Datei weiche.php:

    html
    head
    link rel=“stylesheet“ type=“text/css“ href=“weiche.css“
    /head
    body
    ?
    $grosser_bildschirm=’Leerstring‘;
    ?
    div id=’kleinerbildschirm‘
    ? echo „php wird ausgefuehrt“; $grosser_bildschirm=’Wert wurde geaendert‘; ?
    /div
    ?
    echo $grosser_bildschirm;
    ?
    /body
    /html

    Die CSS-Datei wäre:

    #kleinerbildschirm
    {
    font-weight:bold;
    }

    @media only screen and (min-width: 1024px) {

    #kleinerbildschirm {
    display:none;
    }
    }

    Wenn man nun weiche.php lädt und das Fenster größer/kleiner zieht, sieht man, dass der Wert für $grosser_bildschirm in jedem Fall geändert wird, das echo wird aber nur ausgegeben, wenn die Bildschirmbreite kleiner 1024 ist.

    Antworten
  3. Helen sagt:
    8. Juli 2010 um 13:56 Uhr

    Proto Fluid ist kein verläßliches Tool. Es nimmt ja nicht einmal den User Agent des Gerätes an, das es simuliert (machen leider die wenigsten Simulatoren), weswegen es auch Mobileseite grundsetzlich gar nicht erkennt. Auch Media Queries liest es falsch aus. Proto Fluid ist nicht mehr als ein skalierbarer Bilderrahmen, der etwas völlig anderes darstellt als das reale Gerät.

    Antworten
    1. Elias sagt:
      21. Oktober 2012 um 18:18 Uhr

      Media-Queries scheinen sehr mächtig zu sein. Aber heutzutage muss es doch sicher eine einfachere Lösung geben? Ich meine eine separate Seite erstellen lassen um nicht den ganzen Code in der normalen Homepage verändern zu müssen. Oder?

      Antworten
      1. Raphael sagt:
        24. Oktober 2012 um 10:56 Uhr

        @Elias: Aber hier geht es doch genau um den Programmier-Ansatz einer mobilen Version einer Website 😉 Aber nach kurzem Suchen bin auch http://www.mobilonso.com gestossen. Ich denke das ist doch so etwas wonach du suchst, hoffentlich.

        Antworten
      2. John Snow sagt:
        18. Juni 2014 um 10:06 Uhr

        Ich kenne das Problem Elias, habe mich durch divere Foren und Berichte gekämpft aber dann aufgegeben 😉 Wir haben nun eine Lösung für unseren Gastrobetrieb von http://mobileview.ch , soweit sehr gut. Bin sicher es gibt verschiedenste Anbieter solcher Lösungen. Mobilonso habe ich mir auch angeschaut, aber dann für eine Lösung im eigenen Land entschieden ;-).

        Antworten
    2. Andreas sagt:
      23. Juni 2014 um 20:37 Uhr

      Ja, so ist es. Genaugenommen sind mir auch keine anderen Emulatoren bekannt, welche die Darstellung auf der echten Hardware halbwegs realistisch zeigen. Ist ja auch klar, denn es fehlen Aspekte wie z. B. die jeweilige Pixeldichte und die diversen Macken der verschiedenen Mobilbrowser-/Mobilbetriebssystemversionen.

      Wie auch immer, diesen Artikel sah ich auch schon in der engl. Originalversion. Er wurde offensichtlich stumpf übersetzt, anscheinend von jemandem ohne Sachverstand bzgl. dieser Materie. Ohnehin scheint es mir bei IT-Blogs nicht selten ähnlich zu sein wie bei den Reiseführern – viele schreiben voneinander ab bzw. offerieren mit einigen Formulierungsumstellungen lediglich alten Wein in neuen Schläuchen. So kann man dann den immer gleichen Unsinn wie die Empfehlung unbrauchbarer Emulatoren gleich tausendfach lesen. Seit die „VG Wort“ auch Online-Artikel vergüten muss (Anmeldung vorausgesetzt, mindestens 1.500 Worte und 1.500 Clicks jährlich), liegt die Motivation zur Veröffentlichung von noch mehr Müllcontent halt sehr hoch – Hauptsache, es wird häufig genug aufgerufen.

      Und auch sonst bietet dieser Artikel im Übrigen keinerlei neue Infos.

      Antworten
      1. Dieter Petereit sagt:
        24. Juni 2014 um 8:54 Uhr

        Werter Andreas! Es gibt neben Müllcontent auch Müllkommentare. Deiner ist ein Paradebeispiel dafür. Anders als du will ich aber gerne begründen, warum ich das so sehe:

        Diese Übersetzung hier ist eine Übersetzung eines Artikels von Rachel Andrew, der zuerst auf unserem Familienmitglied Smashing Magazine erschien und dann von Manuela Müller (seinerzeit tätig für die Smashing Media) für Dr. Web übersetzt wurde. Wir schreiben unseren Content nicht von irgendwo ab. Es dürfte allerdings nicht verwundern, dass dieser Artikel dem Original keinerlei neue Infos beifügt. Zu guter Letzt gilt es noch zu berücksichtigen, dass der Beitrag vier Jahre alt ist und gerade bezogen auf die mobile Entwicklung aus heutiger Sicht logischerweise alles andere als Top of the Pops ist.

        Antworten
  4. zyko sagt:
    7. Juli 2010 um 18:21 Uhr

    Daaaanke 🙂
    Hab vor kurzem erst mit einem Kumpel darüber diskutiert, ob man denn nicht für die mobilen Browser seine Webseite mit einfachen Dingen gleich etwas verbesser kann.
    Ein paar div’s weniger sollten es sein – genügt schon. Die die eh nicht so wichtig sind (Werbung, etc) einfach ausblenden.
    Ich dachte da sofort auch an die media tags, man kennt das ja vom drucken her.
    Aber auch er meinte, dass das per media tags wohl nicht geht.
    Jedes Phone hat ja auch seine eigene Auflösung.
    Wieder was gelernt – das machma *ggg* 😉

    Antworten
  5. ScaraX sagt:
    7. Juli 2010 um 16:31 Uhr

    @ Gotisch: ja, im querformat sieht man die normale Ansicht – ist aber auch gut so, weil der Screen ja breiter ist als die angegebenen 480px.

    Auf der Seite gibts allerdings ein paar Fehler, wenn man die Seite im Querformat löd und dann ins hochformat wechselt und umgekehrt. Das liegt aber an dem verwendeten javascript-code und nicht direkt an den media queries.

    MfG
    ScaraX

    Antworten
  6. Gotisch sagt:
    7. Juli 2010 um 15:53 Uhr

    Also auf meinem Android telefon mit standardbrowser sehe ich manchmal noch die ganz normale seite… scheint doch nicht so ganz zu klappen.

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.