Soporte técnico práctico
Tamaño de pantalla, zoom y píxeles CSS
La lectura del tamaño de pantalla de un navegador es útil para el soporte, pero no siempre es la especificación de pantalla impresa en la caja.
Última vez revisado:
El tamaño de la pantalla y el espacio del navegador responden a diferentes preguntas
Un monitor puede tener una alta resolución de hardware, mientras que un navegador informa una pantalla lógica más pequeña.Un sitio web también tiene que caber en la ventana real del navegador, que puede ser mucho más estrecha que la pantalla.Antes de diagnosticar un formulario recortado o un botón superpuesto, identifique qué valor está comparando.
Entender las tres lecturas principales
| Reading | Lo que describe | Úselo para |
|---|---|---|
| Tamaño de pantalla, en píxeles CSS | Las dimensiones de pantalla reportadas por la API de pantalla del navegador. | Comprender la vista del navegador de la pantalla, sujeta al comportamiento de escalado y privacidad. |
| Ventana del navegador, en píxeles CSS | La ventana de diseño de la página, en lugar del exterior del marco del navegador. | Reproducir un problema de diseño adaptativo o comparar los anchos de ventana. |
| Relación de píxeles del dispositivo | La relación entre los píxeles del dispositivo y los píxeles CSS en el entorno de navegación actual. | Explicando la densidad y algunos efectos de zoom.No es un modelo de monitor o un inventario de hardware. |
Por qué es importante el zoom y la escala de la pantalla
Los píxeles CSS son unidades de diseño y no una promesa de un píxel de pantalla física cada uno. El escalado del sistema operativo y el zoom de la página del navegador pueden cambiar la forma en que esas unidades se relacionan con la pantalla. Una ventana con las mismas dimensiones externas puede dar a una página menos espacio de diseño con un zoom de página más alto.
El zoom de pellizco en un dispositivo táctil es diferente del zoom de página ordinario: puede ampliar la ventana de visualización visual sin cambiar la ventana de visualización de diseño de la misma manera. Este comprobador informa los valores de diseño del navegador, por lo que no todos los cambios de zoom visibles alterarán su número de ventana. La ventana de diseño y Relación de píxeles del dispositivo.
Reproduzca un error de diseño con un cambio controlado
- Abierto El comprobador de pantalla y ventana en el navegador afectado.
- Registre la lectura de la ventana etiquetada, la versión del navegador y cualquier zoom de página conocido.
- Si es apropiado, también compare el zoom normal de la página del navegador, sin quitar la configuración de accesibilidad que necesita.
- Vuelva a la página afectada y repita la misma acción.
Por ejemplo, si un botón de pago se superpone en una ventana estrecha, pero no en una más ancha, envía las lecturas de ambas ventanas, lo que proporciona al desarrollador un punto de partida útil para reproducir el diseño. Esto no demuestra que el monitor sea defectuoso o que debas comprar una pantalla de mayor resolución.
Captura la parte útil de la página
Una captura de pantalla recortada puede mostrar la superposición o el control que falta.Incluya suficiente contenido circundante para explicar dónde ocurre, mientras elimina los nombres, los detalles de la cuenta y las pestañas privadas.Envíelo a través del canal de soporte de confianza del servicio con Sus detalles de soporte revisados.
Si necesitas la resolución de pantalla nativa
La multiplicación de la lectura de la pantalla del navegador por su relación de píxeles no es una forma fiable de probar la resolución nativa del panel, especialmente cuando se trata de zoom, sesiones remotas, múltiples pantallas o controles de privacidad.