[Grafik] Bildschirmauflösungen Statistik

Dieses Thema im Forum "Webdesign" wurde erstellt von SidDasFaultier, 25. Oktober 2012 .

Schlagworte:
  1. 25. Oktober 2012
    Bildschirmauflösungen Statistik

    Hey Rushler,

    wo bekommt man den eine verlässliche Statistik her bzgl. der Nutzung von verschiedenen Bildschirmauflösungen?

    Ich habe immer Counter by WebHits: Zähler und Web-Statistiken für eine verlässliche Anlaufstelle in Sachen Web-Statistiken gehalten, aber die listen noch 1024x768 mit 36% (kann ich mir persönlich nicht vorstellen).
    Wenn ich Google dann sagen wieder welche das 1280x1024 oder 1366x768 die meist genutzte Auflösung ist.

    Was sind eure Meinungen?

    Hintergrund ist der das ich eine Website bauen will, die ein Auflösungsabfrage enthält und dementsprechend welche Auflösung der User hat, ein passendes CSS dazu lädt.
     
  2. 25. Oktober 2012
    Zuletzt bearbeitet: 25. Oktober 2012
    AW: Bildschirmauflösungen Statistik

    guter ansatz, aber aus meiner sicht unnütz.
    wie du sicher mitbekommen hast steht css3 und html5 in den startlöchern.
    man spricht von deinem vorgehen von "Responsive Design".
    das bedeutet, dass je nach breite der bühne das css darauf reagiert
    und du recht einfach container anpassen kannst.
    hier mal ein kleines demo:
    HTML:
    <!DOCTYPE html>
    <html>
    <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>Seitentitel</title>
    <style>
    /* Allgemeine Angaben für alle Geräte */
    body {
     font: 100% sans-serif;
     color: #333;
     background-color: #fff;
    }
    
    h2 {
     font-size: 4em;
    }
    
    #navilink { display: none; }
    #navigation a {
     padding: 5px;
     display: block;
    }
    @media screen and (min-width: 600px) {
     #container { width: 80%; margin: auto; max-width: 900px;}
     #inhalt { width: 70%; float: right; }
     #navigation { width: 30%; float: left; }
     body{font-size: 80%;background-color: green;}
    }
    @media screen and (min-width: 900px) {
     body{background-color: yellow;}
    }
    </style>
    </head>
    <body>
    <div id="container">
    <div id="inhalt">
    <a href="#navigation" id="navilink">Navigation</a>
    <h2>Bitte die Grö�e des Browserfensters einmal ändern</h2>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
    <div id="navigation">
    <ul>
     <li><a href="#">Link 1</a></li>
     <li><a href="#">Link 2</a></li>
     <li><a href="#">Link 3</a></li>
     <li><a href="#">Link 4</a></li>
     <li><a href="#">Link 5</a></li>
    </ul>
    </div>
    </div>
    
    </body>
    </html>
    
    je nach breite ändert sich die hintergrundfarbe oder was immer du auch willst.
    daher wird es egal sein ob normal pc, tablet oder mobile.
    du wirst immer das passende layout für jede breite umstellen können.
    damit ist eine umständliche prüfung und nachladen unnötig.
    ich denke, das solltest du beherzigen.
     
    1 Person gefällt das.
  3. 29. Oktober 2012
    AW: Bildschirmauflösungen Statistik

    Gut...danke für deine Antwort...nun stellt sich mir nur noch eine Frage:
    In wie weit ist dein Code Browserkompatibel, auf welchen Browsern (Versionen) läuft dein Code und welche haben damit Probleme?
     
  4. 29. Oktober 2012
    AW: Bildschirmauflösungen Statistik

    Hier hast du eine Tabelle, worin die unterstützten Browser aufgelistet sind.

    Introduction to CSS Media Queries
     
  5. 29. Oktober 2012
    AW: Bildschirmauflösungen Statistik

    Die Seite CanIUse.com ist wirklich super um zu gucken was genutzt werden kann und was eher mit vorsicht

    Can I use... Support tables for HTML5, CSS3, etc
     
    1 Person gefällt das.
  6. 29. Oktober 2012
    AW: Bildschirmauflösungen Statistik

    Vielen Dank!

    Aber schon doof, dass das der IE 8 nicht unterstützt...dann muss ich mir doch was anderes überlegen, da ja doch noch viele den IE 8 nutzen -.-
     
  7. 29. Oktober 2012
    AW: Bildschirmauflösungen Statistik

    Daswegen gibt es für den IE einen Polyfill GitHub: scottjehl / Respond
     
  8. 29. Oktober 2012
    AW: Bildschirmauflösungen Statistik

    Radikal durchgreifen mit einer Nachricht, dass ein Browserupdate ansteht!
    Wenn wir es nicht machen wer sonst ? Irgendwie müssen die normalen User darauf aufmerksam gemacht werden!
     
  9. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.