css - queries - media query tablet

Consulta de medios CSS para apuntar solo a dispositivos iOS

Question

¿Existe una consulta @media para apuntar solo a dispositivos con iOS?

Por ejemplo:

@media (min-device-width:320px) and (max-device-width:768px) {
    #nav {
        yada: yada;
    }
}

¿Esto también alteraría el comportamiento de la página en dispositivos Android con estos anchos de dispositivo?

Answer 1

Como se mencionó anteriormente, la respuesta corta es no. Pero necesito algo similar en la aplicación en la que estoy trabajando ahora, sin embargo, las áreas en las que el CSS debe ser diferente se limitan a áreas muy específicas de una página.

Si es como yo y no necesita presentar una hoja de estilo completamente diferente, otra opción sería detectar un dispositivo con iOS de la manera descrita en la respuesta seleccionada de esta pregunta: Detectar si el dispositivo es iOS

Una vez que haya detectado el dispositivo iOS, puede agregar una clase al área a la que se dirige utilizando Javascript (por ejemplo, document.getElementsByTagName("yourElementHere")[0].setAttribute("class", "iOS-device"); , jQuery, PHP o lo que sea, y diseñe esa clase en consecuencia utilizando la hoja de estilo preexistente.

.iOS-device {
      style-you-want-to-set: yada;
}

Answer 2

Respuesta corta No. CSS no es específico de las marcas.

A continuación se presentan los artículos para implementar para iOS utilizando solo medios.

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

http://stephen.io/mediaqueries/

De hecho, puede usar PHP, Javascript para detectar el navegador iOS y de acuerdo con eso puede llamar al archivo CSS. Por ejemplo

http://www.kevinleary.net/php-detect-ios-mobile-users/

Answer 3

Sí tu puedes.

@supports (-webkit-overflow-scrolling: touch) {
  /* CSS specific to iOS devices */ 
}

@supports not (-webkit-overflow-scrolling: touch) {
  /* CSS for other than iOS devices */ 
}

YMMV.

Funciona porque solo Safari Mobile implementa -webkit-overflow-scrolling : https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

Tenga en cuenta que @supports no funciona en IE. IE omitirá los dos bloques @support anteriores. Para obtener más información, consulte https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/ . Se recomienda no utilizar @supports not por esto.