Quelle est la taille typique d'une fenêtre d'affichage sur un écran 1024x768?
Je conçois une application Web et je souhaite connaître la plus grande taille (x et y) pour laquelle je peux concevoir.
En janvier 2008 , environ la moitié des utilisateurs utilisent des écrans 1024x278 et probablement moins de 10% utilisent des écrans plus petits. (Les utilisateurs de téléphones et de palmtop sont une exception ici.) Nous concevons donc une taille d'écran minimale de 1024x768.
Cependant , c'est la taille de l'écran, et lorsque nous mettons en place notre contenu, nous devons connaître la fenêtre taille. Il existe des preuves que la plupart des utilisateurs ont le navigateur maximisé, mais il faut toujours soustraire de l'espace pour les décorations du système d'exploitation et le chrome du navigateur. Les gens personnalisent leur chrome, il n'y a donc pas de "bonne" réponse; Je vais pour une limite raisonnable qui pourra accueillir la majorité des utilisateurs.
Je vois beaucoup de designers qui disent qu'ils utilisent une largeur de 960 pixels car cela a de nombreux facteurs et peut être divisé également - mais avant de décider, je veux connaître le taille maximale avec laquelle je peux m'en tirer, alors je pourrais choisir d'en utiliser un peu moins. J'ai vu des largeurs maximales de 960, 974 ou même 990 citées ... mes propres expériences semblent montrer une largeur de 1000 œuvres OK.
Les hauteurs sont encore plus difficiles à trouver: je trouve que je peux s'adapter à une hauteur de fenêtre verticale de 595 pixels sur les navigateurs que j'ai essayés, avec un système d'exploitation par défaut typique et chrome paramètres. Mais je Je n'en ai pas essayé beaucoup et je préférerais voir une source plus fiable. Quelqu'un d'autre a sûrement fait cette recherche et l'a fait mieux que moi.
Donc, ma vraie question est la suivante: quelle est la plus grande taille de fenêtre d'affichage que je peux concevoir et je m'attends à ce qu'elle s'adapte sans barres de défilement pour 80 à 90% de tous les utilisateurs?
Aujourd'hui, je viens de tomber sur un site qui est TRÈS pertinent pour cette vieille question qui est la mienne. Apparemment, Google est prêt à partager ses connaissances sur la taille des fenêtres de navigateur. Leur nouveau service est à http://browsersize.googlelabs.com/ et il vous montre simplement leurs données sur les tailles de portail de navigateur typiques.
Remarque : la taille du navigateur Google Labs est désormais très obsolète (l'image est intitulée 2009-11-18-day_google_com_100_donate_example.png) et sera bientôt fermé . Google suggère que Google Analytics puisse être utilisé pour déterminer la distribution de la taille du navigateur pour votre propre site: http://analytics.blogspot.ca/2012/06/new-feature-conduct-browser-size.html
Assurez-vous que votre site affichera une résolution de 800 x 600, mais faites-le s'étendre pour remplir la taille de l'utilisateur.
Rien n'est plus ennuyeux que de surfer à 1600x1200 ou plus pour rencontrer un site stupide qui ne s'étirera pas au-delà d'une largeur de 700-800px.
Découvrez L'homme en bleu pour un excellent exemple de la façon de gérer les changements de taille de page ... http://themaninblue.com/experiment/ResolutionLayout/
Mise à jour: J'ai trouvé un site sympa qui a utilisé des statistiques pour déterminer quel% des utilisateurs peuvent voir quelle taille d'écrans: http: // www .methodologie.com/webcanvas /
La grande majorité des utilisateurs regardent le Web dans IE7 dans une fenêtre agrandie sur un écran 1024x 768 et n'ont pas modifié leur navigateur. J'ai donc trouvé un cochon d'Inde et pris une capture d'écran. J'ai supposé que la barre des tâches était une ligne et visible - encore une fois, le comportement par défaut - et j'ai obtenu une taille de fenêtre de 1003 x 589. J'utiliserais personnellement une zone de 960 x 560 en direct.
Pour ce que cela vaut, XP IE7 avec la largeur par défaut de la barre latérale ouverte en plein écran XGA obtiennent une largeur de fenêtre d'affichage de 862 pixels. Les hauteurs ne sont pas aussi importantes que nous nous attendons à faire défiler verticalement, mais ayant faire défiler horizontalement est aussi la mort.
Il y a bien sûr un certain nombre de raisons pour lesquelles cela pourrait différer de ce qui est en fait disponible, c'est pourquoi nous sommes tous de bons concepteurs de sites Web et utilisons des dispositions de liquide appropriées, n'est-ce pas.
(Qu'est-ce que c'est, stackoverflow? Vraiment? Choquant, tsk.)
Je suis actuellement sur un netbook Acer avec une résolution d'écran de 1024x600. N'oubliez pas que nous sommes un segment de marché en croissance! (ou du moins, essayez de ne pas faire de votre immeuble vertical une hauteur d'écran minimale de 768)
Cela semble être récent, j'ai pensé le mentionner, je l'ai trouvé en parcourant les interwebs ...
je suis sur un écran WUXGA pour ordinateur portable Sony (1920x1200).
J'ai ma barre des tâches sur le côté gauche de l'écran, donc moins le navigateur chrome J'ai encore 1831 pixels assez respectables. Je trouve généralement que c'est bon pour la plupart des utilisations.
Je souhaite juste que stackoverflow détecte mon écran large et me montre l'aperçu de ma réponse dans une colonne de droite.
J'ai Firefox ouvert avec une taille (y compris le chrome) de 1024x1000. Je ne navigue pas en plein écran.
Mon chrome comprend la barre de menus, la barre d'outils de navigation (avec de petites icônes), la barre d'outils des signets, la barre d'onglets, une barre de défilement à droite et la barre d'état en bas.
Mon port d'affichage réel est exactement 1000x843.
La question d'origine - malgré que c'était une bonne question! - ainsi que certaines réponses sont de plus en plus obsolètes par rapport à 2014.
Nous devons maintenant reconnaître le nombre croissant de téléphones intelligents de différentes tailles d'écran, de netbooks, d'iMac à écrans larges, de rétines, de tablettes (Android/Mac), etc., etc.
Ajoutez à cela que le fossé entre le toucher et le toucher se creuse, ce dernier n'étant plus rare.
Nous avons maintenant besoin de device-specific style with a tap-based UI for handheld devices with fixed browser sizes et fluid-responsive style with mouse-hover effects etc. for desktop computers.
Cela devrait être au centre des discussions aujourd'hui.
En ce sens, la réponse à l'orig. la question ne peut plus être facilement posée. Un écran 1024x768 très courant pourrait très bien être un iPad - ou une fenêtre de navigateur réduite.
Je pensais juste ajouter que l'application de statistiques Mint de Shaun Inman a un plugin qui suit la taille de la fenêtre, plutôt que la résolution de l'écran, et prend en compte le chrome du navigateur le plus défavorable. Il regroupe ensuite les résultats car x% des visiteurs ont une largeur de fenêtre> y% ou> z% de hauteur, ce qui peut être très utile pour prendre des décisions éclairées sur un site spécifique, et élimine une partie du travail de supposition du processus.
1007px est le maximum absolu avec lequel vous pouvez travailler dans Internet Explorer ( détails ) sans barres de défilement horizontales. Mais cela dit, je pense que vous ne devriez pas aller au maximum, sauf si vous en avez besoin. Comptez plutôt sur l'hypothèse que les navigateurs de nombreuses personnes ne sont pas maximisés.
Taille du navigateur de Google est un excellent outil.
La largeur de 960 px est une bonne taille car elle est tellement divisible. 1000px sera trop grand pour de nombreux systèmes. La largeur de la barre de défilement et le cadrage totalisent environ 33 pixels sur Vista/Firefox.
Je pense que la hauteur de vérification est utile car il est bon d'avoir une idée de ce qu'un spectateur peut et ne peut pas voir lors de la première ouverture d'une page. En ces jours de saturation des informations, vous ne pouvez pas compter sur un visiteur pour faire défiler la page.
Ma fenêtre d'affichage sur Firefox, avec les onglets ouverts, les liens rapides et l'excellente extension de la barre d'outils des développeurs Web, n'est que de 572 pixels lorsqu'elle est définie sur 1024 x 768.
Si vous utilisez la barre d'outils du développeur Web, l'une des nombreuses fonctionnalités utiles est la possibilité de redimensionner instantanément le navigateur à toutes les tailles pour lesquelles vous l'avez configuré: par exemple. 1024x768, 800x600 etc. Vous pouvez donc voir votre site Web de la même manière que les visiteurs de ces tailles d'écran le verront.
Le développeur Web mérite d'être consulté: https://addons.mozilla.org/en-US/firefox/addon/6
Toutes les réponses que vous avez déjà trouvées sont probablement bonnes.
Pour un utilisateur occasionnel (stéréotypé: Win XP ou Vista, IE6-7, pas de skins personnalisés), une largeur proche de 1000px conviendrait probablement. Si les gens ont modifié leur navigateur, ne l'exécutent pas complètement- écran ou avoir des skins personnalisés sur leurs systèmes d'exploitation, ce nombre peut changer.
Si je devais concevoir pour une résolution de largeur 1024px, je choisirais probablement une largeur proche de 980px. Tout dépend de vous, et il n'y a pas de "réponse unique". Environ 960-1000px quelque part, en fonction de beaucoup de choses.
Quand il s'agit de la hauteur de la page, n'y pensez pas trop. Mettez les informations les plus importantes (navigation, logo, contenu important) en haut de la page, et n'ayez pas peur de laisser l'utilisateur défiler pour trouver le reste. Les gens sont habitués et savent qu'ils doivent le faire défiler. C'est une limitation naturelle que personne n'attend de vous.
Pour ces informations les plus importantes, une fenêtre avec une hauteur d'environ 550 pixels ou plus pourrait probablement être attendue.
Donc, ~ 980px * ~ 550px est probablement une fenêtre d'affichage plus ou moins standard à utiliser comme point de départ :-)