Cómo orientar un dispositivo con un dppx mayor que 2 pero inferior a 3
Estoy tratando de aplicar algunas reglas css para dispositivos con una relación de píxeles 2dppx y algunos otros para dispositivos con 3dppx o superior.
Como solo estoy apuntando a dispositivos pequeños (móviles y tabletas, pero sin computadoras portátiles de retina o televisores), tengo una consulta de medios de ancho máximo que rodea a los otros dos. (editado: eliminar esta consulta de medios no soluciona el problema).
- Las consultas de medios no se comportan como se esperaba en Android
- El teclado de Android no se abre cuando se usan consultas de medios
- CSS Media Query - Soft-teclado rompe reglas de orientación css - solución alternativa?
- Consultas de medios CSS en Nexus 7, la resolución de pantalla no funciona en código
- HTML / CSS: Cómo evitar que los navegadores de Android y iPhone escalen imágenes de fondo
@media only screen and (max-width: 40em) { @media screen and (min-device-pixel-ratio: 2dppx) and (max-device-pixel-ratio: 2.9dppx){ $base-font-size: 150%; } @media screen and (min-device-pixel-ratio: 3dppx) { $base-font-size: 180%; } } Pero cuando ejecuto la web en mi iPhone 5s (con un 2dppx), puedo ver el base-font-size es igual al 180%, por lo que parece que está tomando los estilos equivocados. ¿Por que es esto entonces?
- El desbordamiento CSS hace clic en eventos en la pestaña Galaxy
- Android Browser redimensiona el texto automáticamente
- Android 2.2 2.3 solución para la consulta de medios de ancho de dispositivo
- Device-aspect-ratio (consulta de medios) no funciona para Droid 2
Ok parece que el problema no puede estar en las consultas de medios en sí, sino en el hecho de que no es posible actualizar variables Sass dentro de las consultas de medios , como se indica en esta otra pregunta Stackoverflow .
De la respuesta aceptada, cito "Esto simplemente no es posible, ya que la pantalla trigger @media y (max-width: 1170px) ocurre en el lado del cliente".
Así que voy a tratar de volver a escribir mi código para evitar el cambio de variables dentro de las consultas de medios.
Puedo estar completamente equivocado aquí, pero no creo que dppx usar dppx con min-device-pixel-ratio , debes escribirlo como:
@media only screen and (max-width: 40em) { @media screen and (min-device-pixel-ratio: 2) and (max-device-pixel-ratio: 2.9){ $base-font-size: 150%; } @media screen and (min-device-pixel-ratio: 3) { $base-font-size: 180%; } }
Alternativamente, para ser más explícito, intente usar la propiedad de resolution :
@media only screen and (max-width: 40em) { @media screen and (min-resolution: 2dppx) and (max-resolution: 2.9dppx){ $base-font-size: 150%; } @media screen and (min-resolution: 3dppx) { $base-font-size: 180%; } }
EDIT: es posible que tenga que añadir un prefijo de proveedor como se indica a continuación:
@media only screen and (max-width: 40em) { @media screen and (min-resolution: 2dppx) and (max-resolution: 2.9dppx), screen and (-webkit-min-resolution: 2dppx) and (-webkit-max-resolution: 2.9dppx){ $base-font-size: 150%; } @media screen and (min-resolution: 3dppx), screen and (-webkit-min-resolution: 3dppx) { $base-font-size: 180%; } }
En lugar de utilizar la relación min-device-pixel-ratio , intente usar min-resolution .
@media only screen and (max-width: 40em) { @media screen and (min-resolution: 2dppx) and (max-resolution: 2.9dppx){ $base-font-size: 150%; } @media screen and (min-resolution: 3dppx) { $base-font-size: 180%; } }
Vea la sección de resoution aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries