¿Los navegadores iPhone / Android son compatibles con CSS @media handheld?

Quiero cambiar mi página web CSS para navegadores web que se ejecutan en teléfonos celulares, como el iPhone y Android. He intentado algo como esto en el archivo CSS:

@media handheld { body { color: red; } } 

Pero no parece tener ningún efecto, al menos en el iPhone. ¿Cómo puedo escribir mi CSS para que funcione de manera diferente en el iPhone, etc., idealmente sin usar javascript?

Puede usar consultas de @media :

  

Esta versión particular apuntará al iPhone (y a cualquier otro dispositivo con una pantalla de max-device-width del max-device-width de 480px .

Apple, para el iPhone, aunque esto es de memoria, así que no puedo estar completamente seguro de su precisión, optó por ignorar el uso de hojas de estilo handheld o mobile , ya que, y otros dispositivos iOS, fueron capaces de hacer css más o menos a la par con los navegadores de escritorio, a través de Safari. Para otros dispositivos, no estoy seguro, exactamente, de lo fieles que son, aunque el artículo A List Apart (vinculado a arriba) ofrece una breve descripción de algunos.


Editado en respuesta a un comentario, desde @Colen:

Hmm, parece que muchos dispositivos móviles nuevos tienen resoluciones más altas (p. Ej., El droide X tiene 854×480). ¿Hay alguna manera de detectarlos? No creo que se manejen con esta consulta.

No puedo decirlo con certeza, ya que no tengo acceso a esos dispositivos, sin embargo, otro artículo de A List Apart Article: Responsive Web Design señala que:

Afortunadamente, el W3C creó consultas de medios como parte de la especificación CSS3, mejorando la promesa de los tipos de medios. Una consulta de medios nos permite enfocar no solo ciertas clases de dispositivos, sino también inspeccionar las características físicas del dispositivo que representa nuestro trabajo. Por ejemplo, tras el reciente aumento de WebKit para dispositivos móviles, las consultas sobre medios se convirtieron en una técnica popular para el lado del cliente para entregar una hoja de estilo personalizada para iPhone, teléfonos Android y otros.

Por lo tanto, supongo que ellos, los dispositivos Android, deben poder ser identificados por @ media-queries, pero, como noté, no puedo decir con certeza.

Para apuntar a la resolución del dispositivo, hay un ejemplo de:

  

Lectura adicional: Recomendación candidata W3 para consultas de medios .

Desde este sitio hay algunas otras consultas de medios que son útiles para orientar teléfonos iPhone / Android:

  // target mobile devices @media only screen and (max-device-width: 480px) { body { max-width: 100%; } } // recent Webkit-specific media query to target the iPhone 4's high-resolution Retina display @media only screen and (-webkit-min-device-pixel-ratio: 2) { // CSS goes here } // should technically achieve a similar result to the above query, // targeting based on screen resolution (the iPhone 4 has 326 ppi/dpi) @media only screen and (min-resolution: 300dpi) { // CSS goes here } 

Pude utilizar con éxito la consulta de medios con ancho de dispositivo máximo para apuntar con éxito a teléfonos con Android, aunque tuve que ajustar el ancho hasta 800px en lugar de los 480 enumerados. Para iPhone 4, la relación -webkit-min-device-pixel trabajó para apuntar al iPhone4 (max-device-width: 480px no, supongo que se dirigirá al iPhone3, pero no tenía uno útil para probar).

Puedo ver que esto se vuelve bastante complicado, pero si tiene que admitir una multitud de dispositivos y tener CSS personalizado para cada uno de ellos, siempre y cuando admitan las consultas de los medios, parece que es posible hacer lo que tiene que ajustar cada plataforma . Y sí, codificaría primero para los estándares, de modo que se pueda evaluar tanto CSS, pero muchas veces estamos hablando de presentar diseños alternativos actualmente dimensionados adecuadamente para los dispositivos que se usan.

@media handheld refiere solo a los antiguos teléfonos celulares diminutos proto-html de años anteriores que ni siquiera podían realmente mostrar páginas web. La comunidad de vendedores de ePUB, MOBI, Tablet dijo: “¡H * ck no, no somos dispositivos de @media handheld !” porque estaban correctamente preocupados de que esto los dejaría para siempre en una tierra de nadie subordinada a las páginas web “reales”.

Con los dispositivos pequeños de hoy con pantallas de muy alta resolución, todavía no tenemos una buena manera de decirle a HTML cómo mostrar las cosas “correctamente” en pantallas grandes con una resolución relativamente baja frente a pantallas pequeñas con una resolución muy alta. Y como un pedo viejo certificado, mis ojos quisieran recordarte que no, la respuesta no es solo hacer que todo, incluidas las fonts, sea 2 veces más pequeño.

No, ni los navegadores iPhone o Android son compatibles con CSS @media handheld .

Mira usando la consulta de medios ‘hover’.

Pon esto en tu archivo SCSS:

 // At this point the CSS would target screens above 990px - but only // if they support hover (ie laptops, PC's etc). $point-at-which-use-large-screens: (min-width 990px) (hover hover); .some-class-you-want-to-target { // Some CSS to only apply to larger screens with mouse available. @include breakpoint($point-at-which-use-large-screens) { color: red; } } 

Después de ejecutar gruñidos, etc. en el SCSS, esto producirá CSS con el siguiente aspecto:

 @media (min-width: 991px) and (hover: hover) { color:red; }