Ich entwickle eine Webanwendung, die sehr informationsintensiv ist. Dies bedeutet, dass jedes Pixel, das auf dem Bildschirm für die Anzeige verfügbar ist, sehr hilfreich ist, um die Benutzeroberfläche zu umgehen zu überladen aussehen und relevante Daten anzeigen.
Ich habe mich gefragt: Was ist die „übliche“ Bildschirmauflösung? Vor Jahren war es so etwas wie 1024 × 768, Aber heutzutage muss es etwas viel Höheres sein. Ich kann mich nicht darauf verlassen, was ich als Entwickler verwende, und ich habe wahrscheinlich größere Bildschirme und eine größere Auflösung als der durchschnittliche Joe-Benutzer.
Also, wo kann ich finden Die derzeit empfohlene Auflösung für Webanwendungen?
Kommentare
- Siehe diese Frage auf der Webmaster-Website – webmasters.stackexchange.com/questions/2494/…
- Sie sollten ‚ nicht verwenden Bildschirmauflösung, um Ihre Entscheidungen zu leiten, müssen Sie die Größe der Browserfenster kennen, insbesondere wenn Monitore hu bekommen Sie können nicht davon ausgehen, dass Benutzer einen Browser im Vollbildmodus verwenden. Das wäre zu groß, um die meisten Websites zu lesen.
- Siehe auch diese Frage zum Layout mit fester Breite und Flüssigkeit .
- In Bezug auf die Bildschirmauflösung zu denken, als wäre es ein statischer Parameter, klingt anachronistisch. @MonicaCellio hat den Punkt richtig verstanden. Die Immobilienzuweisung für eine Anwendung ist dynamisch und liegt in den Händen des Benutzers.
- Hinweis: Angesichts des zunehmenden reaktionsschnellen Designs haben viele Menschen erkannt, dass es auch wichtig ist, zu überlegen, was a ist Gute maximale Spaltenbreite und dass die Lesbarkeit von Text häufig sichergestellt werden kann, indem die für die Schriftgröße spezifische Breite des Inhalts erreicht wird, dh 35-40em für eine feste Textbreite.
Antwort
Das hängt wirklich davon ab, wo Sie sich auf der Welt befinden. Weltweit ist 1366 x 768 immer noch am häufigsten, jedoch 1920×1080 ist die einzige Auflösung, deren Aufnahme tatsächlich zunimmt (vermutlich, weil dies der Standard-Breitbildmodus für moderne Laptops zu sein scheint).
Die Website StatCounter.com soll Ihnen dabei helfen, weitere Informationen zu diesem Thema zu erhalten.
JEDOCH Bedenken Sie, dass nur weil bestimmte Auflösungen häufiger sind als andere, dies nicht berücksichtigt, wie breit der Browser des Benutzers ist Leider sind nur wenige Messungen für diese Statistik bekannt (Google Analytics hat diese verwendet, unterstützt sie jedoch nicht mehr).
Kommentare
- Außerdem sind (werden) die weltweiten Durchschnittswerte für diese Art von Daten möglicherweise nicht mit denen Ihrer Benutzerbasis identisch. Bis Sie Ihre tatsächlichen Benutzer befragen, geben Sie ‚ Ich weiß nicht, was sie ‚ verwenden. Daher ist es am besten, Ihr Layout so zu gestalten, dass es mit mehreren (und unterschiedlichen) Auflösungen funktioniert.
- Daten zur Verteilung der Bildschirmauflösung auf Android- und iOS-Smartphones und -Tablets finden Sie unter Auflösung ‚ Abschnitt gegen Ende von opensignalmaps.com/reports/fragmentation.php . Praktischerweise entspricht die Bildschirmauflösung hier eher den Abmessungen des Ansichtsfensters / Browserfensters auf Smartphones und Tablets als auf Laptops und Desktops. Unpraktisch für Android spiegelt sich die Fragmentierung der Plattform ‚ ziemlich stark in der breiten Verteilung der Bildschirmauflösungen wider. Dies würde wahrscheinlich ein flüssiges Layout für mobile Geräte zu einer guten Idee machen.
- Genau wie ein Update hat 1366 x 768 1024 x 768 um einiges überholt, seit diese Antwort veröffentlicht wurde.
- @DangerZone Guter Punkt . Leider bietet StatCounter ‚ keine Links zum aktuellen ‚ ‚ an, da immer das Suffix a erforderlich ist Datumsbereich (daher mehrere Änderungen an dieser Antwort im Laufe der Jahre!). Ich habe die Antwort mit aktuellen Statistiken geändert. Ich denke, ich ‚ muss das auch in einem Jahr oder so tun!
Antwort
Beachten Sie, dass Laptops und Desktops nicht mehr die einzigen webfähigen Geräte sind. Das iPad hat eine Auflösung von 1024 x 768, das iPhone 4 eine Auflösung von 960 x 640, vorausgesetzt, Sie verwenden sie im Querformat.
Kommentare
- Afaik the Das iPhone 4 rendert Seiten so, als hätte es die alte Auflösung von 480 * 320. Seiten auf meinen 4 sind ‚ nicht halb so groß wie auf einem 3GS. Die zusätzliche Auflösung wird nur für das Rendern von Schriftarten / Bildern verwendet, was ich ‚ erhalte.
- Absolut gültiger Punkt. Die Bildschirmbreite von 960 Pixel bleibt auch bei zunehmenden Desktop-Bildschirmgrößen relevant, da viele Handheld-Geräte diese Größe auch anzeigen können.Ganz zu schweigen von der Tatsache, dass Websites nur dann unlesbar sind, wenn sie sehr breit sind (1600+).
Antwort
Die Wahl der minimalen Bildschirmauflösung hängt davon ab, wie viele Benutzer Sie ausschließen möchten.
If Sie haben keinen Verlauf von Auflösungsdaten für Ihre spezifischen Benutzer. Eine Option besteht darin, öffentliche, globale Nutzungsstatistiken als Richtlinie zu verwenden. Unter Verwendung einer solchen globalen Datenquelle habe ich das folgende Diagramm erstellt, um den Status der Desktop-Bildschirmbreiten auf einen Blick darzustellen.
Antwort
„, aber heutzutage muss es etwas viel Höheres sein“
Jede Antwort hier scheint zu ignorieren die gesamte mobile Welt.
Sicher, Desktop-Bildschirme werden immer größer. Aber jeder nutzt auch mobile Geräte. Auf so viel Web wird jetzt über Telefone und Tablets zugegriffen.
Adaptives Design ist wirklich der richtige Weg.
Kommentare
- JA. Dies ist der entscheidende Punkt. Fließendes Webdesign ist von entscheidender Bedeutung, da heutzutage so viele Menschen über Telefone und Tablets auf Websites zugreifen. Der Auflösungstrend ist Fragmentierung, nicht Erweiterung.
Antwort
Warum entwerfen Sie nicht adaptiv für was auch immer Sie haben verfügbar „?
Mit Javascript können Sie die Größe des Browserfensters ermitteln und einige Änderungen am Stylesheet vornehmen. Wenn Sie beispielsweise einen grafisch reichhaltigen, großen Bildhintergrund mit einer 960-Pixel-Spalte haben, das Hintergrundbild wird für Benutzer mit 1024-768 nicht benötigt, Sie müssen es also nicht laden. Sie können auch Ihre Schriftgröße ändern, um die verfügbaren Bildschirmflächen optimal zu nutzen.
Antwort
Beliebteste Auflösung im Jahr 2011 ist 1280×800. 18,09% der Benutzer im Internet verwenden es.
Hier sind die 10 wichtigsten Auflösungen für 2011: http://www.superiorwebsys.com/blog/93/Most_Common_Screen_Resolutions_in_2011/
Kommentare
- +1 als Referenz, aber mit 1024 x 768 dicht dahinter und der niedrigeren der beiden oberen Auflösungen sollte dies möglicherweise sein höhere Berücksichtigung trotz etwas geringerem Prozentsatz.
- 1024 wird es für eine Weile geben + neue mobile Geräte. Daher würde ich empfehlen, Websites für diese Auflösung zu entwerfen, wenn Sie kein dehnbares Design planen.
Antwort
Ich stimme Jon zu, dass man beim Entwerfen von Web-Apps darauf achten sollte, die Vollbildauflösung als Grundlage zu verwenden. Er hat auch Recht, wenn er feststellt, dass die Breitbildvariante 768 heutzutage sehr verbreitet ist.
Ich habe kürzlich jedoch einige sehr gute Gründe erlebt, meine eigene Richtlinie für die Bildschirmauflösung zu verringern. Fernseher und Multimedia-Laptops verwenden jetzt den HD-Standard als Auflösung. Dies bedeutet, dass es eine gute Chance ist, dass mehrere Benutzer 1280 × 720 als Auflösung haben. Das Ausrichten von 768 als Höhe kann für viele Benutzer etwas zu viel sein.
Siehe auch: http://en.wikipedia.org/wiki/Screen_resolution
Antwort
Wenn Sie mit Schreibtisch- / Laptop-Bildschirmen mit statischem Layout sicher sein möchten, verwenden Sie weiterhin ein Minimum von 1024 x 768. Die bessere Option ist jedoch das Entwerfen eines flüssigen (flexiblen) Layouts.
Antwort
Microsoft hat kürzlich ihre Telemetriedaten in diesem Bereich für Windows 7-Benutzer :
Sie können sehen, dass (zumindest für Benutzer, die sich noch im Upgrade-Zyklus befinden) eine große Anzahl von Benutzern 16: 9- und 16: 10-Bildschirme anstelle von 4: 3 ausführt (und die Vielzahl von ihnen läuft mit 1366 × 768).
Kommentare
- Scheint, dass Microsoft selbst intern die mobile Landschaft ignoriert .;)
Antwort
Ja, versuchen Sie, ein flexibles Layout in Betracht zu ziehen. Wenn Sie vorhaben, jedes verfügbare Pixel zu verwenden, ist es die beste Lösung, den Vollbildmodus abzudecken Sie müssen Javascript verwenden. Sie sollten das Responsive Web Design von ALA durchgehen und sich das ansehen Beispiel . Wann Versuchen Sie in diesem Beispiel, die Größe Ihres Browsers zu ändern und zu sehen, wie der Inhalt reagiert. Auf diese Weise kann Ihre Website auf jedem Bildschirm gut aussehen, sei es Desktop, Laptop oder Tablet des Telefons.
Kommentare
- Bitte beachten Sie, wenn Sie gehen Auf dem Weg zur Verwendung jedes einzelnen verfügbaren Pixels kann es für Ihre Leser schwieriger sein, Ihren Text zu lesen.
Antwort
Ich habe 1280 x 1024 angestrebt, mit einem Layout, das anpassungsfähig ist, wenn mobile Einschränkungen eine Rolle spielen.
Ansonsten verlasse ich mich normalerweise auf die Analyse und versuche, die Top-Auflösungen für das zu berücksichtigen gegebene Seite.
Antwort
Einige Dinge zu beachten:
- Für wen ist diese App? Wenn es sich um eine interne Ausrichtung handelt (dh um eine Unternehmensumgebung), sprechen Sie mit der IT und sehen Sie, auf welche Auflösung die Mitarbeiterbildschirme eingestellt sind. Sehen Sie sich insbesondere die Mitarbeiter an, die am meisten in der App arbeiten würden.
- Wenn dies der Fall ist. “ Überlegen Sie sich als öffentlich zugängliche App, welche Daten Sie über die „Auflösungen“ Ihrer Benutzer haben. Wenn Sie neu gestalten, überprüfen Sie die Analysen auf der aktuellen Website und machen Sie sich ein Bild davon, welche Auflösungen Ihre Benutzer ausführen. Möglicherweise stellen Sie hier ein Muster fest (dh die Benutzer haben in der Regel sehr hohe Auflösungen, da sie Power-User usw. sind), aber es besteht die Möglichkeit, dass es überall zu finden ist.
- Denken Sie an die Daten, die Sie sind präsentieren. Wenn es sich um viele Raster handelt, ist möglicherweise ein flüssiges Layout am besten. Dann kann der Benutzer seinen Bildschirm strecken, um mehr der benötigten Daten anzuzeigen.
Das Entwerfen für 1024 ist ein sicherer Weg für das Web, aber es ist faul, wenn Sie nicht versuchen, mehr über Ihre Benutzer zu erfahren, bevor Sie eine Entscheidung treffen.
Antwort
Die 1024 * 768 sollte weiterhin ein gesunder Menschenverstand bleiben. Andernfalls hängt es wirklich von Ihrem Publikum ab Website oder App für Designer sollten Sie beispielsweise für eine viel höhere Auflösung wie 1680 * 1050 optimieren.
Sie sollten sie testen oder von Ihrem gewünschten Publikum fragen. Aber 1024 * 768 ist immer noch ein Muss!
In einer idealen Welt würde es unterschiedliche (CSS) Stile für unterschiedliche Auflösungen und Geräte geben. 🙂
Kommentare
- “ Wenn Sie beispielsweise eine Website oder App für Designer erstellen, sollten Sie op Timize für eine viel höhere Auflösung wie 1680 * 1050. “ Die meisten ‚ Designer ‚ haben iPhones .
- @ DA01 – Somit das unterschiedliche CSS für unterschiedliche Geräte.
- Das hilft, aber ich habe hauptsächlich die ‚ optimiert, für die optimiert wurde ‚. Idealerweise optimieren Sie ‚ für ‚ alle Geräte.
Antwort
Allgemeine Projektorauflösungen:
- XGA = 1024 x 768 Pixel
- WXGA = 1280 x 800 Pixel
- HD = 1920 x 1080 Pixel
- 4K = 4096 x 2160 Auflösung
Kommentare
- Könnten Sie dies erweitern? Und was meinen Sie mit Projektorauflösungen?
- Beispiel: Wenn Sie einen PT-EX600U-LCD-Projektor haben und diesen an Ihren Computer anschließen, ändert sich Ihre Bildschirmauflösung auf: 1028 x 768 Pixel.