¿Cuál es el tamaño de ventana gráfica típico en una pantalla de 1024x768?

Question

Estoy diseñando una aplicación web y deseo conocer el tamaño más grande (x e y) para el que puedo diseñar.

As of January 2008, aproximadamente la mitad de los usuarios usan pantallas de 1024x278, y probablemente menos del 10% utilizan pantallas más pequeñas. (Los usuarios de teléfono y de bolsillo son una excepción aquí). Por lo tanto, estamos diseñando para un tamaño de pantalla mínimo de 1024x768.

Sin embargo, ese es el tamaño de la pantalla, y cuando estamos poniendo nuestra contenidos necesitamos saber el tamañoventana gráfica. There is evidence que la mayoría de los usuarios tienen el navegador maximizado, pero uno debe restar espacio para las decoraciones del sistema operativo y el navegador Chrome. Las personas personalizan su cromo, por lo que no hay una sola respuesta "correcta"; Voy por un límite razonable que acomodará a la mayoría de los usuarios.

veo plenty of designers que dicen que utilizar un ancho de 960 píxeles, ya que tiene muchos factores y se puede dividir de manera uniforme - pero antes de decidir esto, quiero saber el tamaño máximo que pueda salirse con la , entonces podría elegir usar algo menos. He visto anchos máximos de 960, 974 o incluso 990 cotizados ... mis propios experimentos parecen mostrar un ancho de 1000, funciona bien.

Las alturas son aún más difíciles de encontrar: encuentro que puedo ajustar una altura de ventana vertical de 595 píxeles en los navegadores que he probado, con las configuraciones de sistema operativo y de cromo predeterminadas típicas. Pero no he intentado muchas, y preferiría ver una fuente más autorizada. Seguramente alguien más ha hecho esta investigación y lo ha hecho mejor que yo.

Así que mi verdadera pregunta es esta: ¿Cuál es el tamaño de ventana más grande que puedo diseñar y espero que encaje sin barras de desplazamiento para el 80-90% de todos los usuarios?

Answer 1

Hoy acabo de encontrar un sitio que es ALTAMENTE relevante para esta vieja pregunta mía. Aparentemente, Google está dispuesto a compartir sus conocimientos sobre el tamaño de las ventanas del navegador. Su nuevo servicio se encuentra en el http://browsersize.googlelabs.com/ y, básicamente, solo muestra sus datos en los tamaños típicos del portal del navegador.

Nota: El browsersize Google Labs es ahora muy de moda (la imagen se titula 2009-11-18-day_google_com_100_donate_example.png) y will be shut down soon. Google sugiere que Google Analytics se puede usar para determinar la distribución del tamaño del navegador para su propio sitio: http://analytics.blogspot.ca/2012/06/new-feature-conduct-browser-size.html

Answer 2

Asegúrate de que tu sitio muestre 800x600, pero haz que se expanda para llenar cualquier tamaño que tenga el usuario.

Nada es más molesto que navegar a 1600x1200 o más grande solo para encontrar un sitio tonto que no se extenderá más allá de un ancho de 700-800px.

Salida El hombre de azul para un gran ejemplo de cómo manejar los cambios de tamaño de página ... http://themaninblue.com/experiment/ResolutionLayout/

Actualización: He encontrado un sitio agradable que utiliza algunas estadísticas para determinar qué% de los usuarios puede ver qué pantallas de tamaño: http://www.methodologie.com/webcanvas/

Answer 3

Probablemente todas las respuestas que ha encontrado ya sean correctas.

Para el usuario casual (Stereotypical: Win XP o Vista, IE6-7, sin máscaras personalizadas) un ancho cercano a 1000px probablemente encajaría. Si las personas han modificado sus navegadores, no los ejecutan a pantalla completa o tienen máscaras personalizadas en sus sistemas operativos, este número podría cambiar.

Si tuviera que diseñar para una resolución de 1024px de ancho, probablemente elegiría un ancho cercano a 980px. Todo depende de ti, y no hay "una única respuesta". Alrededor de 960-1000px en algún lugar, dependiendo de muchas cosas.

Cuando se trata del alto de la página, no piense demasiado al respecto. Coloque la información más importante (navegación, logotipo, contenido importante) en la parte superior de la página, y no tema dejar que el usuario se desplace para buscar el resto. La gente está acostumbrada, y saben que tienen que desplazarse.Es una limitación natural con la que nadie espera que hagas nada.

Para obtener la información más importante, probablemente se pueda esperar una ventana con una altura de alrededor de 550px o más.

Así, ~ * ~ 980px 550px es probablemente una ventana más o menos estándar a utilizar como punto de partida :-)

Answer 4

Por lo que vale la pena, los usuarios de XP IE7 con el ancho predeterminado de la barra lateral abierta al completo la pantalla XGA obtiene un ancho de ventana de 862px. Las alturas no son tan importantes como esperamos desplazarse verticalmente, pero tener que desplazarse horizontalmente también es la muerte.

Por supuesto, hay varias razones por las que esto puede diferir de lo que es en realidad disponible, por lo que todos somos buenos diseñadores web y utilizamos diseños líquidos adecuados, ¿no?

(¿Qué es eso, stackoverflow? ¿En serio? Impactante, tsk.)

Answer 5

tengo Firefox abierto con un tamaño (incluyendo cromo) de 1024x1000. No navego en pantalla completa.

My chrome incluye la barra de menús, la barra de herramientas de navegación (con iconos pequeños), la barra de herramientas de marcador, la barra de pestañas, una barra de desplazamiento del lado derecho y la barra de estado en la parte inferior.

Mi puerto de visualización real es exactamente 1000x843.

Answer 6

Actualmente estoy en una netbook Acer a una resolución de pantalla de 1024x600. ¡Recuerde que somos un segmento de mercado en crecimiento! (o al menos, intente no hacer que su propiedad inmobiliaria vertical asuma 768 como una altura de pantalla mínima)

Answer 7

estoy en una pantalla Sony WUXGA para computadora portátil (1920x1200).

Tengo mi barra de tareas en el lado izquierdo de la pantalla, por lo que, menos el navegador Chrome, todavía tengo unos 1831 píxeles bastante respetables. Por lo general, esto es bueno para la mayoría de los usos.

Solo deseo que stackoverflow detecte mi pantalla ancha y me muestre mi vista previa de respuesta en la columna de la derecha.

Answer 8

El ancho de 960px es un buen tamaño porque es tan divisible. 1000px será demasiado grande para muchos sistemas. El ancho de la barra de desplazamiento más el encuadre aumenta a aproximadamente 33px en Vista/Firefox.

Creo que la altura de comprobación es útil, ya que es bueno tener una idea de lo que un espectador puede y no puede ver cuando abre la primera página. En estos días de saturación de información, no puede confiar en que cada visitante se desplace hacia abajo.

Mi vista en Firefox, con pestañas abiertas, enlaces rápidos y la excelente extensión de la barra de herramientas para desarrolladores web es de solo 572 px cuando se establece en 1024x768.

Si utiliza la barra de herramientas del desarrollador web, una de las muchas funciones útiles es la capacidad de cambiar el tamaño del navegador de forma instantánea a los tamaños que configure: por ejemplo. 1024x768, 800x600 etc. Para que pueda ver su sitio web de la misma manera que los visitantes de esos tamaños de pantalla lo verán.

desarrollador Web es también de visita obligada: https://addons.mozilla.org/en-US/firefox/addon/60

Answer 9

Sólo quería añadir que Mint estadísticas aplicación de Shaun Inman tiene una plugin que rastrea tamaño de la ventana, en lugar de resolución de la pantalla, y tiene en cuenta el navegador peor de los casos cromo.Luego agrupa los resultados ya que x% de los visitantes tienen ancho de ventana> y%, o> z% de altura, lo que puede ser muy útil para tomar decisiones informadas sobre un sitio específico, y elimina parte del trabajo de adivinar del proceso.

Answer 10

1007px es el máximo absoluto con el que puede trabajar en Internet Explorer (details) sin barras de desplazamiento horizontales. Pero dicho esto, creo que no deberías ir por el máximo a menos que lo necesites. Más bien, confíe en la suposición de que los navegadores de muchas personas no están maximizados.

Google Browser Size es una gran herramienta.

Answer 11

La gran mayoría de los usuarios miran la Web en IE7 en una ventana maximizada en una pantalla de 1024x 768 y no han modificado su navegador. Entonces encontré un conejillo de indias y tomé una captura de pantalla. Supuse que la barra de tareas era una fila y visible, de nuevo, el comportamiento predeterminado, y obtuve un tamaño de ventana de 1003 x 589. Yo usaría un área en vivo de 960 x 560, personalmente.

Answer 12

Ésta parece ser reciente, pensé que me gustaría mencionar que, mientras que la encontré recorriendo la interwebs ...

http://www.nealgrosskopf.com/tech/thread.php?pid=43

Answer 13

La pregunta original - a pesar de que era una buena! - así como algunas de las respuestas son cada vez más obsoletas según 2014.

Ahora debemos reconocer el creciente número de teléfonos inteligentes de diferentes tamaños de pantalla, netbooks, iMacs con pantallas anchas, retinas, (Android/Mac) tabletas, etc. etc.

Agregue a eso que la brecha entre el tacto y el grifo está creciendo, y esto último ya no es una ocurrencia rara.

Ahora es preciso device-specific style with a tap-based UI for handheld devices with fixed browser sizes y fluid-responsive style with mouse-hover effects etc. for desktop computers.

Este debe ser el foco de la discusión de hoy.

En este sentido, la respuesta al original. la pregunta no se puede dar fácilmente más. Una pantalla muy común de 1024x768 podría ser un iPad, o una ventana del navegador reducida.