IU independiente de DPI para páginas web
Durante casi una década, antes LCD se convirtió en la norma, las pantallas solían ser de 72 o 96 DPI (por lo general, solo se encuentran en pantallas Trinitron). Sin embargo, ahora las pantallas de 120 y 144 DPI son bastante comunes.
Con la llegada de Windows 7, los problemas de DPI se resuelven más o menos hasta cierto punto para las aplicaciones de escritorio, y al menos la interfaz de usuario del sistema operativo nunca se rompe en una pantalla de DPI alta.
Ahora llegamos a las páginas web (tuve una gran discusión con un amigo sobre la construcción de una página web independiente de DPI). Mi opinión era que los elementos de la interfaz de usuario deberían tener el mismo tamaño en varios sistemas, y que cada dimensión CSS debería especificarse en pulgadas en lugar de píxeles .
Planteé este tema en SO y hubo una desaprobación general sobre el uso de pulgadas como unidades, lo que me parece bastante razonable.
Tengo una pantalla de 144 DPI de solo 15.4 pulgadas de tamaño: el tamaño de los píxeles individuales es tan pequeño que el antialiasing de texto y la representación de subpíxeles son realmente efectivos, pero veo muchas páginas web que suponen que una fuente de 8 puntos es lo suficientemente grande como para leer en cualquier sistema.
Creo que esto es una gran molestia y una falla fundamental en el diseño de la interfaz de usuario ... Hacer suposiciones sobre el entorno de los usuarios cuando realmente puede ajustarse al existente.
No es muy diferente de las primeras páginas web en la década de 2000 que no se mostrarían correctamente en 1280x1024 ya que fueron diseñadas para 1024x768
Otra ironía es que solo Firefox representa un elemento de 1 pulgada como 1 pulgada física: todos los demás navegadores están apagados a menos que el DPI de su pantalla sea 96 Obviamente, en algún lugar del código está el valor 96 codificado: ¿Qué tan difícil es reemplazar eso con un GetScreenDPI ( ) o cualquier llamada API?
¿Cuáles son tus puntos de vista?
Los píxeles son un concepto de nivel de hardware, y a medida que se agrupan más píxeles en menos espacio, los diseñadores tendrán que aprender a usar una unidad de medida diferente. Si diseño un botón para que tenga 100 × 200 píxeles, porque supongo que una pantalla de 100 ppp, un usuario en una pantalla de 200 ppp sufrirá ya que el botón tendrá ¼ del área.
A medida que se envíen más dispositivos con pantallas de alta densidad de píxeles, los diseñadores tendrán más control (y flexibilidad) si conocen los aspectos técnicos de los sistemas para los que están diseñando.
Por ejemplo, especificar diseños web en puntos es más seguro para el futuro ya que está especificando el tamaño físico (salvo los errores de implementación que mencionó).
Como otro ejemplo, las coordenadas de la pantalla en dispositivos iOS se miden en puntos, y para dispositivos más antiguos sin la nueva pantalla de alta densidad, hubo un mapeo uno a uno de puntos a píxeles. El iPhone 4 duplica la cantidad de píxeles, pero mantiene las dimensiones de tamaño de punto de la pantalla igual (por lo que los diseños antiguos seguirán funcionando, pero los diseños nuevos pueden usar dimensiones fraccionales para una mayor precisión posicional).
Creo que es mejor usar el porcentaje para el diseño de la interfaz de usuario. Entonces puede poner valores absolutos en la etiqueta del cuerpo. Cambie los valores absolutos del cuerpo en todas partes requeridos usando javascript. entonces tendrás todo lo demás bien.
Para la parte de JavaScript, intente reconocer la pantalla del usuario y calcular los valores. es fácil.
¿Por qué usar pulgadas cuando los gráficos y los tamaños de pantalla se miden en píxeles? Las diferentes resoluciones muestran diferentes números de píxeles por pulgada, por lo que si medimos en pulgadas los márgenes, el relleno, los tamaños de fuente (mejor usar px o em que pt), etc., sería más difícil determinar cuán grandes son nuestras imágenes (que son hecho píxel por píxel) estaría en la página. Sin mencionar que la resolución de 800x600 siempre es de 800px x 600px independientemente de cuántas pulgadas es la pantalla.
Parte de convertirse en un profesional de desarrollo/diseño web (o gurú) es aprender a construir su sitio de manera efectiva para que la mayor cantidad de usuarios posible puedan acceder a él. Y las técnicas requeridas para hacerlo se están extendiendo y aceptando ampliamente. Mi punto es que si el desarrollador está haciendo su trabajo, no debería ser un problema. Y esa es una de las razones por las que este sitio existe.
consistencia de la unidad; pulgadas reales (72 puntos hacen una pulgada)
Fuente de 8 puntos, me encanta Liberation Mono a 8 puntos, pero eso es solo porque se ve muy bien en la cuadrícula ajustada en un tamaño tan pequeño; para mí, algunas fuentes simplemente se ven extrañas cuando ves sus detalles, pero se ven bien ajustadas a la cuadrícula
1280x1024 (5: 4) y 1024x768 (4: 3); podría escalar bien de menor a mayor, pero tendría que rotar la pantalla más grande y si estas pantallas fueran del mismo tamaño, un diseño en pulgadas funcionaría sin cambios, pero todavía hay dos problemas: uno para diseñar el texto para una pantalla de tamaño desconocido y obtener el tamaño de fuente correcto
puede hacer que una página sea invariable para la resolución de su pantalla, pero no puede ser invariable para el tamaño y la forma de la pantalla
modifiqué mupdf (un visor de pdf) a su tamaño real predeterminado, ya que en x11 el servidor proporciona el tamaño real de la pantalla y su resolución informada por xdpyinfo para mi pantalla como:
dimensions: 1280x800 pixels (301x192 millimeters)
resolution: 108x106 dots per inch
(aunque si desea las dimensiones del área de trabajo, debe leer una propiedad definida por las Extensiones del Administrador de ventanas: _NET_WORKAREA(CARDINAL) = 0, 25, 1280, 744)
pero descubrí que la pantalla era demasiado corta y eso significaba que tenías que desplazarte en páginas pdf; prefiero los medios con paginación, pero nunca debes mezclar paginación y desplazamiento
y luego pensé en obtener una pantalla que no sea más corta que una página de letras, como un modo vertical de 21.5in lcd (pero es difícil encontrar un lcd de ese tamaño en el rango de más de 108 dpi para no más de 250 nosotros)