#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. + Multi-Zitat Zitieren
#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. + Multi-Zitat Zitieren
#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? + Multi-Zitat Zitieren
#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 + Multi-Zitat Zitieren
#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. + Multi-Zitat Zitieren
#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 -.- + Multi-Zitat Zitieren
#7 29. Oktober 2012 AW: Bildschirmauflösungen Statistik Daswegen gibt es für den IE einen Polyfill GitHub: scottjehl / Respond + Multi-Zitat Zitieren
#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! + Multi-Zitat Zitieren