Resolución de la pantalla
Las resoluciones de pantalla más comunes hoy en día son 1280×1024 o 1024×768 píxeles. Algunas personas con monitores grandes pueden incluso tener los suyos configurados a 1600×1200. Y algunos ordenadores más antiguos pueden estar todavía configurados a 800×600 píxeles. Si la página web estándar se ve en un monitor de menor resolución, todo parece más grande y puede ser necesario desplazarse mucho para ver todo el contenido. En un monitor de mayor resolución, todo aparece más pequeño y no será necesario desplazarse porque todo es visible – incluso puede haber un exceso de espacio en los márgenes.
Recomendamos ver los sitios web con una resolución de pantalla de 1280×1024 píxeles. Lo mejor es diseñar para esa resolución, ya que es la más utilizada y permite ver una buena cantidad de contenido en la ventana maximizada del navegador.
Las fuentes de los navegadores tienden a tener un aspecto ligeramente diferente cuando se representan en un Mac o en un PC. La Helvetica es una fuente común en Mac para el texto html, pero aunque se ve bien en un Mac, puede ser difícil de leer en los navegadores de PC, incluso con la fuente instalada correctamente en el PC – es por eso que la mayoría de las hojas de estilo de fuentes san-serifed por defecto a la fuente más fácil de leer Arial primero.
Respondedor
Cuando se diseña un sitio web, una de las cosas más importantes que hay que tener en cuenta es asegurarse de que la página aparezca correctamente en pantallas y dispositivos de todos los tamaños. Este rápido artículo le dará consejos sobre cómo asegurarse de que su sitio web aparece correctamente en pantallas de todos los tamaños.
Definir la anchura relativa de una página es el método recomendado cuando se trata del diseño de páginas web debido a la capacidad de la página para ajustarse a pantallas de cualquier tamaño. Al definir la anchura en porcentaje en lugar de en número de unidades, se crea una cierta flexibilidad para cada pieza de la página, permitiendo que crezca o se reduzca en función de las especificaciones de la pantalla del espectador.
En este ejemplo, el código dicta que la página de su sitio web ocupará el 100% de la ventana, independientemente del tamaño de la pantalla. Si desea que su página aparezca ligeramente más pequeña, le recomendamos que defina una anchura no inferior al 80%, ya que de lo contrario corre el riesgo de que su contenido aparezca demasiado pequeño en la pantalla. Si defines una anchura menor, puedes centrar tu pantalla utilizando margin: auto.
Prueba del sitio en diferentes dispositivos
Este artículo que va a centrarse principalmente en el tamaño del contenido específico del artículo. Se utilizará una gran cantidad de Flexbox, y se verá en una forma efectiva de hacer un sitio web de tamaño de la pantalla ajustable mediante el uso de algunas cosas grandes en HTML y CSS.
Para algunos desarrolladores web son poco luchando para hacer su sitio web de resolución de pantalla de ajuste. Para dar una experiencia única al usuario, este aspecto es muy crítico. Ya que con los cambios tecnológicos los usuarios son más en el uso de diferentes dispositivos para navegar por Internet. Por lo tanto, es muy importante que el sitio web se adapte a todas las resoluciones.
Veamos lo que vamos a hacer. En este caso he demostrado esto con diferentes dispositivos (Iphone 5, Galaxy S4, Windows Phone 920 y ITab 2). También lo he probado desde dos navegadores Chrome, FireFox e IE, pero en IE las consultas de medios no funcionan. He encontrado una solución para ello pero no ha funcionado.
En realidad, la técnica que voy a utilizar puede ser utilizada de muchas maneras diferentes, he dome mi codificación de demostración que coincide con mi escenario. Su desarrollo puede diferir de este. Pero mi objetivo final es mostrar cómo usar esto.
Sitio web para móviles
La mayoría de nosotros utilizamos los diferentes dispositivos para probar nuestras aplicaciones, pero podemos deshacernos de este problema utilizando la función de emulación en el navegador Chrome. (Encontrará esta opción en Chrome 32 o en la última versión)
Haz clic en la opción de dispositivo como se muestra en la imagen de abajo y selecciona el dispositivo en el que quieres probar tu aplicación. Te proporciona los últimos dispositivos móviles, incluyendo iPhone, iPads, teléfonos y tabletas Nexus, etc.
Si quieres probar tu aplicación en una resolución personalizada, hay una opción Resolución justo debajo de la opción Modelo (ver la imagen de abajo). Allí puedes establecer el valor de la anchura, la altura y la relación de píxeles de la pantalla retina que desees.
Me ayuda mucho a comprobar mi aplicación en un solo lugar. Esto es muy útil pero no lo tomes como una opción alternativa para interactuar con tu aplicación en un dispositivo real para evaluar la experiencia UX completa.