@media screen and (min-width: ?)

Media Queries: Mobile Versionen von Websites mit CSS3 erstellen

Responsive Styles für jedes Gerät

Die komplette Anleitung von der Syntax bis zur Praxis.

Syntax
Features
Breakpoints
Best Practices
31. Januar 2026 31. Januar 2026
Reading Time: 24 minutes
Markus Seyfferth

Markus Seyfferth

Autor Dr. Web

Media Queries sind ein CSS-Feature, das Webentwickler täglich nutzen. Media Queries sind die Basis von Responsive Design. Sie bestimmen, wie eine Website auf unterschiedlichen Bildschirmgrößen dargestellt wird. Ob auf dem großen Desktop-Monitor, dem Tablet auf der Couch oder dem Smartphone in der U-Bahn.

Das Prinzip ist einfach: Sie definieren Bedingungen, und der Browser wendet die zugehörigen Styles an, wenn diese Bedingungen erfüllt sind. Ist das Browserfenster schmaler als 768 Pixel? Dann blende die Sidebar aus. Druckt jemand die Seite? Dann verstecke die Navigation. Hat der Nutzer Dark Mode aktiviert? Dann zeig helle Schrift auf dunklem Hintergrund.

CSS Reference
Media Queries

Responsive Styles für jedes Gerät. Die komplette Syntax auf einen Blick.

Aufbau einer Media Query
@media screen and (min-width: 768px) { }
At-Regel
Ausgabegerät
Operator
Feature
Wert
screen
Bildschirme
Desktop, Laptop, Tablet, Smartphone
print
Drucker
Druckausgabe und Druckvorschau
all
Alle Geräte
Standard, wenn nichts angegeben
and UND
, ODER
not NICHT
only NUR
Media Features
Viewport
  • width
  • min-width
  • max-width
  • height
  • aspect-ratio
  • orientation
Eingabe
  • hover
  • pointer
  • any-hover
  • any-pointer
Präferenzen
  • prefers-color-scheme
  • prefers-reduced-motion
  • prefers-contrast
Display
  • resolution
  • color
  • color-gamut
  • monochrome
Beispiele
Smartphones
@media (max-width: 480px) { .sidebar { display: none; }}
Dark Mode
@media (prefers-color-scheme: dark) { body { background: #1a1a1a; }}
Touch-Geräte
@media (pointer: coarse) { .button { min-height: 48px; }}
Druckversion
@media print { nav, .ads { display: none; }}

Dieser Artikel erklärt, wie Media Queries funktionieren und wie Sie sie in der Praxis einsetzen.

Das Wichtigste in Kürze

  • Media Queries sind CSS-Regeln, die nur unter bestimmten Bedingungen greifen
  • Die Syntax besteht aus @media, Ausgabegerät (z.B. Bildschirm oder Print), Operatoren und Media Features
  • Desktop First und Mobile First haben jeweils ihre eigenen Stärken und Schwächen
  • Neben der Bildschirmbreite gibt es über 15 weitere Media Features für Orientierung, Farbschema oder Eingabemethode
  • Ohne den Viewport-Meta-Tag funktioniert auf dem Smartphone gar nichts

Was sind Media Queries?

Eine Media Query ist eine Wenn-Dann-Regel. Sie schreiben eine Bedingung, und wenn der Browser diese Bedingung erfüllt sieht, wendet er die zugehörigen CSS-Regeln an.

CSS

Die Bedingung hier: Das Browserfenster ist maximal 768 Pixel breit. Die Konsequenz: Die Sidebar wird ausgeblendet. Wird das Fenster breiter als 768 Pixel, gilt die Bedingung nicht mehr. Die Sidebar erscheint wieder. Das passiert, wenn Sie das Browserfenster in der Größe verändern.

Wie ist eine Media Query aufgebaut?

Eine vollständige Media Query sieht so aus:

CSS

Fünf Bestandteile, jeder mit einer klaren Aufgabe:

@media leitet die Abfrage ein.

screen ist das Ausgabegerät. Es bestimmt, für welche Art von Gerät die Regel gilt. Die drei gängigen Typen:

MedientypGilt für
screenBildschirme
printDrucker
allAlles (Standard)

and verknüpft Bedingungen miteinander.

(min-width: 768px) ist das eigentliche Media Feature. Es fragt eine Eigenschaft ab und vergleicht sie mit einem Wert.

Die geschweiften Klammern umschließen die CSS-Regeln, die bei erfüllter Bedingung gelten sollen.

Welche Operatoren gibt es?

Bedingungen lassen sich kombinieren.

CSS

Das Komma wirkt wie ein „oder“:

CSS

not kehrt die Bedingung um:

CSS

Welche Media Queries gibt es?

Die Bildschirmbreite ist das meistgenutzte Feature. Aber Media Queries können weit mehr abfragen.

Wie frage ich Viewport und Dimensionen ab?

FeatureFragt ab
width, min-width, max-widthBreite des Browserfensters
height, min-height, max-heightHöhe des Browserfensters
aspect-ratioSeitenverhältnis (z.B. 16/9)
orientationHoch- oder Querformat
CSS

Die Liste der Media Features wächst. Wer noch einen Schritt weiter gehen will: Container Queries fragen nicht den Viewport ab, sondern auch das Elternelement.

Wie erkenne ich Maus, Touch oder Stift?

FeatureFragt ab
hoverKann das Gerät hovern? (Maus vs. Touch)
pointerWie präzise ist das Eingabegerät?
CSS

Wie frage ich die Nutzer-Einstellungen ab?

Diese Features respektieren die Systemeinstellungen des Nutzers:

FeatureFragt ab
prefers-color-schemeHelles oder dunkles Farbschema
prefers-reduced-motionWunsch nach weniger Animationen
prefers-contrastWunsch nach höherem Kontrast
CSS

Wie erkenne ich hochauflösende Displays?

FeatureFragt ab
resolutionPixeldichte des Bildschirms
colorFarbfähigkeit
monochromeGraustufen-Display
CSS
Zwei Wege, ein Ziel
Desktop First vs. Mobile First

Beide Ansätze führen zu responsiven Websites. Die Wahl hängt vom Projekt ab.

Desktop First
max-width

Sie starten mit dem Desktop-Layout und passen für kleinere Bildschirme an. Die Styles werden reduziert.

/* Basis: Desktop */.sidebar { width: 300px; }@media (max-width: 1024px) { .sidebar { width: 200px; }}@media (max-width: 768px) { .sidebar { display: none; }}
Sofort das vollständige Layout sichtbar
Passt zu den meisten CMS-Themes
Gut wenn Desktop-Mockups vorliegen
Mobile lädt eventuell unnötiges CSS
Mobile First
min-width

Sie starten mit dem Mobile-Layout und erweitern für größere Bildschirme. Die Styles werden ergänzt.

/* Basis: Mobile */.sidebar { display: none; }@media (min-width: 769px) { .sidebar { display: block; width: 200px; }}@media (min-width: 1025px) { .sidebar { width: 300px; }}
Mobile lädt nur nötiges CSS
Zwingt zur Priorisierung
Entspricht Googles Mobile-First-Index
Vollständiges Layout erst bei großen Screens
Welcher Ansatz passt zu Ihrem Projekt?
Bestehendes CMS-Theme anpassen
Neues Projekt ohne Vorgaben
Design-Mockups sind Desktop-first
Performance auf Mobile kritisch
Mehrheit der Nutzer kommt vom Desktop
Mehrheit der Nutzer kommt vom Smartphone
Wichtig: Bleiben Sie bei einem Ansatz. Wer max-width und min-width wild mischt, produziert schwer wartbaren Code.

Was ist besser: Desktop First oder Mobile First?

Beide Ansätze haben ihre Berechtigung. Die Wahl hängt vom Projekt ab, nicht von einer Glaubensfrage.

Was spricht für Desktop First?

Sie gestalten zuerst die Desktop-Version und passen dann für kleinere Bildschirme an. Die Media Queries nutzen max-width:

CSS

Vorteile:

  • Sie sehen sofort das vollständige Layout
  • Entspricht dem Workflow vieler Designer, die zuerst Desktop-Mockups liefern
  • Passt gut zu bestehenden CMS-Themes, die meist Desktop First gebaut sind

Nachteile:

  • Mobile Geräte laden unter Umständen CSS, das sie gar nicht brauchen
  • Sie müssen Elemente aktiv ausblenden oder verkleinern
Mobile First Workflow

Vom kleinsten Bildschirm zum großen Monitor: So funktioniert modernes Responsive Design

1
Basis-Styles für Mobile

Starten Sie ohne Media Query. Die Grundstyles gelten für alle Geräte, optimiert für kleine Bildschirme.

/* Kein Media Query nötig */
.container {
  width: 100%;
  padding: 1rem;
}
2
Erweitern mit min-width

Fügen Sie mit min-width-Queries Komplexität hinzu, sobald mehr Platz verfügbar ist.

@media (min-width: 768px) {
  .container {
    max-width: 90%;
    margin: 0 auto;
  }
}
3
Volle Desktop-Features

Auf großen Bildschirmen nutzen Sie den verfügbaren Platz für komplexere Layouts.

@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    display: grid;
    grid-template-columns: 1fr 3fr;
  }
}
Warum min-width statt max-width?

Die Kaskade arbeitet mit Ihnen: Jeder Breakpoint fügt neue Regeln hinzu, statt bestehende zu überschreiben. Das CSS bleibt schlanker und die Logik ist leichter nachvollziehbar.

Veraltet
Desktop First mit max-width

Komplexe Desktop-Styles als Basis, die für Mobile mühsam wieder rückgängig gemacht werden müssen.

Modern
Mobile First mit min-width

Schlanke Mobile-Basis, progressive Erweiterung für größere Screens. Bessere Performance, weniger CSS.

Was spricht für Mobile First?

Sie gestalten zuerst die mobile Version und erweitern dann für größere Bildschirme. Die Media Queries nutzen min-width:

CSS

Vorteile:

  • Mobile Geräte laden nur das CSS, das sie brauchen
  • Zwingt zur Priorisierung: Was ist wirklich wichtig?
  • Entspricht Googles Mobile-First-Indexing

Nachteile:

  • Das vollständige Layout sehen Sie erst bei größeren Viewports
  • Wenn die Design-Vorlage Desktop-first ist, arbeiten Sie gegen den Strich

Welchen Ansatz wählen?

SituationEmpfehlung
Neues Projekt ohne VorgabenMobile First
Bestehendes CMS-Theme anpassenSo wie das Theme arbeitet
Design-Mockups sind Desktop-firstDesktop First
Performance auf Mobile ist kritischMobile First
Mehrheit der Nutzer kommt vom DesktopDesktop First

Das Wichtigste: Bleiben Sie bei einem Ansatz. Wer min-width und max-width wild mischt, produziert schwer wartbaren Code.

Warum funktionieren meine Media Queries auf dem Smartphone nicht?

Die häufigste Ursache: Der Viewport-Meta-Tag fehlt. Ohne ihn behandeln mobile Browser Ihre Seite wie eine Desktop-Website und skalieren sie herunter.

Fügen Sie diesen Tag in den <head> Ihrer HTML-Datei ein:

HTML

Er sagt dem Browser: Nimm die tatsächliche Gerätebreite als Viewport, nicht eine simulierte Desktop-Breite.

Die meisten CMS wie WordPress fügen diesen Tag automatisch ein. Wenn Ihre Media Queries trotzdem nicht greifen, prüfen Sie als erstes, ob er vorhanden ist.

Welche Fehler passieren häufig?

Warum ist die Reihenfolge wichtig?

CSS wird von oben nach unten gelesen. Spätere Regeln überschreiben frühere. Bei Desktop First müssen die kleineren Breakpoints unten stehen, bei Mobile First die größeren.

CSS

Was passiert bei Lücken zwischen Breakpoints?

CSS

Wie gehe ich mit !important um?

Wenn das Theme !important verwendet, überschreiben Ihre Media Queries die Styles nicht. Sie müssen dann ebenfalls !important einsetzen.

CSS

Warum ist max-device-width veraltet?

max-device-width fragt die physische Bildschirmbreite ab, nicht die Viewport-Breite. Das Feature gilt als veraltet. Verwenden Sie stattdessen max-width.

Wie setze ich Breakpoints richtig?

Es gibt keine magischen Zahlen, die für jede Website funktionieren. Diese Werte aus gängigen Frameworks sind ein Startpunkt:

BreakpointTypische Zielgeräte
480pxSmartphones (Portrait)
768pxSmartphones (Landscape), kleine Tablets
1024pxTablets, kleine Laptops
1200pxLaptops, Desktop
1400pxGroße Monitore

Der bessere Ansatz: Schauen Sie sich Ihr konkretes Layout an. Ziehen Sie das Browserfenster langsam schmaler. An welcher Stelle bricht das Design? Dort setzen Sie den Breakpoint.

Gerätenamen in Kommentaren sind keine gute Idee. „iPhone 14″ veraltet schnell. „Unter 400 Pixel“ bleibt verständlich.

Wie teste ich Media Queries?

Browser-DevTools

Alle modernen Browser bieten einen Device Mode. In Chrome: F12 drücken, dann auf das Smartphone-Symbol klicken. Sie können vordefinierte Geräte auswählen oder eigene Größen eingeben.

Echte Geräte

Emulatoren sind praktisch, aber sie zeigen nicht alles. Touch-Verhalten, Scrolling-Performance, Browser-Eigenheiten auf iOS oder Android: Das sehen Sie nur auf echten Geräten.

Mindestens ein iPhone und ein Android-Gerät sollten Sie zur Hand haben. Tablets sind seltener geworden, aber wenn Ihre Zielgruppe sie nutzt, testen Sie auch dort.

Der Fenster-Trick

Ziehen Sie Ihr Browserfenster langsam von breit nach schmal. Achten Sie auf Stellen, an denen das Layout springt oder Elemente überlappen. Dort stimmt etwas nicht.

Wie füge ich Media Queries in WordPress ein?

WordPress bietet mehrere Wege, eigenes CSS hinzuzufügen. Die meisten modernen WordPress-Themes sind bereits responsive und bringen eigene Breakpoints mit. Wenn Sie diese anpassen oder erweitern wollen, haben Sie drei Möglichkeiten.

Über den Customizer

Der einfachste Weg: Im WordPress-Backend unter Design → Customizer → Zusätzliches CSS können Sie eigene Regeln eintragen. Sie überschreiben das Theme-CSS und bleiben bei Updates erhalten.

Wie arbeite ich mit einem Child-Theme?

Für umfangreichere Anpassungen legen Sie ein Child-Theme an. In dessen style.css schreiben Sie Ihre Media Queries. Das ist sauberer und übersichtlicher als alles in den Customizer zu packen.

Wie nutze ich den Block-Editor für Media Queries?

Einzelnen Blöcken können Sie CSS-Klassen zuweisen. Diese Klassen stylen Sie dann in Ihrem eigenen CSS inklusive Media Queries.

CSS Media Queries

Syntax, Ausgabegeräte, Operatoren und alle Media Features

Aufbau einer Media Query
@media screen and (min-width: 768px) { … }
At-Regel
Ausgabegerät
Operator
Media Feature
Wert
Ausgabegeräte
screen
Bildschirme aller Art
print
Druckausgabe
all
Alle Gerätetypen (Standard)
Logische Operatoren
and
UND-Verknüpfung
,
ODER-Verknüpfung
not
Negation
only
Nur dieser Typ
Media Features
Feature Kategorie Werte / Beispiel
width / min-width / max-width Viewport 768px, 100vw, 50em
height / min-height / max-height Viewport 600px, 100vh
aspect-ratio Viewport 16/9, 4/3, 1/1
orientation Viewport portrait | landscape
resolution Display 72dpi, 150dpi, 2dppx
color Farbe Bits pro Farbkanal
color-gamut Farbe srgb | p3 | rec2020
hover Interaktion hover | none
pointer Interaktion fine | coarse | none
prefers-color-scheme Präferenz light | dark
prefers-reduced-motion Präferenz reduce | no-preference
prefers-contrast Präferenz more | less | no-preference
Praxis-Beispiele
Smartphones bis 480px
@media screen and (max-width: 480px) { .sidebar { display: none; }}
Dark Mode
@media (prefers-color-scheme: dark) { body { background: #1a1a1a; color: #f5f5f5; }}
Touch-Geräte
@media (pointer: coarse) { .button { min-height: 44px; padding: 12px 24px; }}
Druckversion
@media print { nav, footer, .ads { display: none; }}

Glossar: 12 Fachbegriffe zu Media Queries

@media

@media ist das Schlüsselwort, das eine Media Query einleitet. Es steht immer am Anfang der Regel und signalisiert dem Browser, dass eine bedingte CSS-Anweisung folgt.

Breakpoint

Ein Breakpoint ist die Stelle, an der das Layout wechselt. Bei 768 Pixel verschwindet die Sidebar, bei 1024 Pixel werden aus zwei Spalten drei. Der Begriff meint sowohl den Pixel-Wert als auch den konzeptionellen Punkt im Design.

Desktop First

Desktop First ist ein Entwicklungsansatz: Sie gestalten zuerst die Desktop-Version und passen dann mit max-width-Queries für kleinere Bildschirme an.

Media Feature

Ein Media Feature ist die Eigenschaft, die Sie in einer Media Query abfragen. Beispiele: width, orientation, prefers-color-scheme. Manche Features wie width akzeptieren Werte, andere wie hover sind binär.

Media Type

Der Media Type grenzt ein, für welche Geräteklasse eine Regel gilt. Die drei relevanten Typen heute: screen für Bildschirme, print für Drucker, all für beide.

Mobile First

Mobile First ist ein Entwicklungsansatz: Sie gestalten zuerst die mobile Version und erweitern dann mit min-width-Queries für größere Bildschirme.

Operator

Operatoren verknüpfen Bedingungen in Media Queries. and verlangt, dass alle Bedingungen erfüllt sind. Das Komma wirkt als „oder“. not kehrt die Bedingung um.

prefers-color-scheme

prefers-color-scheme ist ein Media Feature, das die Farbschema-Einstellung des Betriebssystems abfragt. Mögliche Werte: light und dark.

prefers-reduced-motion

prefers-reduced-motion ist ein Media Feature für Barrierefreiheit. Es erkennt, ob der Nutzer in seinen Systemeinstellungen reduzierte Animationen wünscht.

Responsive Design

Responsive Design bezeichnet Webseiten, die sich an verschiedene Bildschirmgrößen anpassen. Media Queries sind das technische Werkzeug, das dies ermöglicht.

Viewport

Der Viewport ist der sichtbare Bereich der Website im Browser. Seine Breite und Höhe bilden die Grundlage für die meisten Media Queries.

Viewport-Meta-Tag

Der Viewport-Meta-Tag ist ein HTML-Element im <head>, das mobilen Browsern sagt, wie sie die Seite skalieren sollen. Ohne ihn funktionieren Media Queries auf Smartphones nicht zuverlässig.

FAQ

Was ist der Unterschied zwischen min-width und max-width?

min-width gilt ab einer bestimmten Breite aufwärts. max-width gilt bis zu einer bestimmten Breite. Ein 800 Pixel breites Fenster erfüllt sowohl min-width: 600px als auch max-width: 1000px. Welches Sie nutzen, hängt davon ab, ob Sie Mobile First oder Desktop First arbeiten.

Kann ich Media Queries auch für die Höhe nutzen?

Ja. Die Features height, min-height und max-height funktionieren wie ihre Breiten-Pendants. In der Praxis werden sie seltener gebraucht, weil Nutzer vertikales Scrollen gewohnt sind. Für Fullscreen-Elemente oder Sticky-Header können sie aber sinnvoll sein.

Wie erkenne ich, ob ein Gerät Touch unterstützt?

Mit den Media Features hover und pointer. hover: none bedeutet, dass das Gerät keinen Hover-Zustand kennt, also wahrscheinlich ein Touchscreen ist. pointer: coarse bedeutet, dass der Zeiger unpräzise ist, also ein Finger statt einer Maus. Beide Features lassen sich kombinieren.

Warum funktionieren meine Media Queries im Internet Explorer nicht?

Grundlegende Media Queries funktionieren ab Internet Explorer 9. Neuere Features wie prefers-color-scheme oder hover werden nicht unterstützt. Da Microsoft den IE 2022 eingestellt hat, lohnt sich der Aufwand für Workarounds nur noch bei sehr speziellen Projekten.

Soll ich Breakpoints in Pixel oder em angeben?

Beides funktioniert. Pixel sind intuitiver, em skalieren mit der Schriftgröße des Nutzers. Die meisten Frameworks verwenden Pixel. Wichtiger als die Einheit ist, dass Sie innerhalb eines Projekts konsistent bleiben.

Wie viele Breakpoints brauche ich?

Drei bis fünf reichen für die meisten Websites. Jeder zusätzliche Breakpoint erhöht den Wartungsaufwand. Setzen Sie Breakpoints dort, wo Ihr Layout tatsächlich bricht, nicht bei theoretischen Gerätegrößen.

Jetzt mit Freunden & Kollegen teilen
, ,

Wie hilfreich fanden Sie diese Seite? Schreiben Sie Kritik und Anregungen auch gerne in die Kommentare!

Durchschnittliche Bewertung 4.8 / 5. Anzahl Bewertungen: 2051

11 Antworten zu „Media Queries: Mobile Versionen von Websites mit CSS3 erstellen“

  1. Avatar von Silvio Siefke
    Silvio Siefke

    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.

  2. Avatar von pudem
    pudem

    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.

  3. Avatar von Helen
    Helen

    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.

    1. Avatar von Elias
      Elias

      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?

      1. Avatar von Raphael
        Raphael

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

      2. Avatar von John Snow
        John Snow

        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 ;-).

    2. Avatar von Andreas
      Andreas

      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.

      1. Avatar von Dieter Petereit

        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.

  4. Avatar von zyko
    zyko

    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* 😉

  5. Avatar von ScaraX
    ScaraX

    @ 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

  6. Avatar von Gotisch
    Gotisch

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

Schreiben Sie einen Kommentar

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


Dr. Web Newsletter

Zum Newsletter anmelden

Kommen Sie wie über 6.000 andere Abonnenten in den Genuss des Dr. Web Newsletters. Als Dankeschön für Ihre Anmeldung erhalten Sie das große Dr. Web Icon-Set: 970 Icons im SVG-Format – kostenlos.

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an kontakt@drweb.de
„✓ Bitte prüfen Sie Ihr Postfach und bestätigen Sie Ihre Anmeldung.“
Das große Dr. Web Icon-Set mit über 970 individuell anpassbaren Icons im SVG Format.