saber - mantener tamaño imagen css
Diferencia entre la relación de aspecto y la relación de aspecto del dispositivo en las consultas de medios CSS (5)
aspect-ratio
Describe la relación de aspecto del área de visualización seleccionada del dispositivo de salida. Este valor consiste en dos enteros positivos separados por un carácter de barra ("/"). Esto representa el número de píxeles horizontales sobre el número de píxeles verticales.
device-aspect-ratio
Describe la relación de aspecto del dispositivo de salida. Este valor consiste en dos enteros positivos separados por un carácter de barra ("/"). Esto representa el número de píxeles horizontales sobre el número de píxeles verticales.
¿Cuál es la diferencia en términos simples entre aspect-ratio device-aspect-ratio ?
La relación de aspecto mide el área de la ventana. La relación de aspecto del dispositivo mide el área de la pantalla del dispositivo.
Para todos aquellos que están confundidos acerca de la diferencia entre el área de visualización seleccionada y el dispositivo de salida con respecto a la relación de aspecto:
área de visualización específica
Relación de aspecto de la ventana de su navegador o del área donde se muestra su sitio web (un caso especial sería, por ejemplo, un sitio web incorporado)
dispositivo de salida
Relación de aspecto físico de la pantalla. Por ejemplo, de tu teléfono inteligente o pantalla de escritorio.
Como los teléfonos inteligentes y las tabletas suelen mostrar las aplicaciones solo en modo de pantalla completa, la relación de aspecto y la relación de aspecto del dispositivo son las mismas. En una computadora de escritorio, esto no siempre es el caso, ya que el usuario puede cambiar el tamaño de la ventana del navegador y, por lo tanto, la relación de aspecto cambia.
Espero que ayude.
Una diferencia funcional en los dispositivos móviles es que al tener el teclado virtual aparece la relación de aspecto, pero no cambia la relación de aspecto del dispositivo.
Relación de aspecto
La relación de aspecto de la ventana gráfica o la relación de aspecto del dispositivo es la relación del ancho a la altura. Por lo tanto, si una pantalla tuviera 1.000 píxeles de ancho y 500 píxeles de altura, la relación de aspecto del dispositivo sería de 2: 1, ya que 1.000 es el doble de 500. Las proporciones de las pantallas varían ampliamente, aunque a primera vista prácticamente todas como un rectángulo similar.
Las relaciones de aspecto comunes del monitor son 16: 9 (como 1920 × 1080 o 1366 × 768 píxeles) o 16:10 (1280 × 800). El iPhone 3 y 4S son 3: 2 (480 × 320 y 960 × 640) y el iPhone 5 es 16: 9 (1136 × 640). Los teléfonos con Android suelen ser 4: 3, 3: 2, 16:10 o 16: 9.
Ejemplos:
@media only screen and (device-aspect-ratio: 16/9)
{ ... }
@media only screen and (min-device-aspect-ratio:
1920/1080) { ... }