¿Los navegadores para iPhone/Android admiten CSS @media handheld?

Question

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 parecen 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?

Answer 1

Puede utilizar @media queries:.

<link rel="stylesheet" href="path/to/iphone.css" media="only screen and (max-device-width:480px)"/> 

Esta versión particular se centrará en el iPhone (y cualquier otro dispositivo con una pantalla de max-device-width de 480px

Apple, para el iPhone, aunque esto es de memoria, así que no puedo estar completamente seguro de su exactitud, decidí ignorar el uso de las hojas de estilo handheld o mobile, ya que, y otros dispositivos iOS, podían hacer que css más o menos estuviera a la par de los navegadores de escritorio, a través de Safari. Para otros dispositivos no estoy seguro, ex Por cierto, cuán fieles son, aunque el artículo A List Apart (vinculado a arriba) ofrece un breve resumen de algunos.

---

Editado en respuesta a comentar, a partir @Colen:

Hmm, parece que una gran cantidad de nuevos dispositivos móviles tienen resoluciones más altas (por ejemplo Droid X es 854x480). ¿Hay alguna manera de detectarlos? No creo que se manejen con esta consulta.

Soy incapaz de decir con certeza, ya que no tengo acceso a esos dispositivos, sin embargo, otra A List Apart Article: Responsive Web Design notas que:

Afortunadamente, el W3C ha creado preguntas de los 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.

Así que supongo que, dispositivos Android, deben ser capaces de objetivos por los medios de comunicación @-consultas, pero, como se ha señalado, no soy capaz de decir con certeza.

a TARGET dispositivo de resolución, no es un ejemplo de:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="shetland.css" /> 

Lectura adicional: W3 Candidate Recommendation for media queries.

Answer 2

De this site hay algunas otras preguntas de los medios que son útiles en la selección de iPhones/teléfonos 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 
} 

yo era capaz de utilizar correctamente la consulta de medios max-device-ancho para apuntar con éxito los teléfonos Android, aunque tuve que ajustar el ancho hasta 800px en vez 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).

Veo que esto se está volviendo bastante complicado, pero si debe admitir una multitud de dispositivos y tener CSS personalizado para cada uno de ellos, siempre que admitan consultas de medios, parece que es posible hacer lo que tiene que hacer. 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.

Answer 3

@media handheld se refiere solo a esos antiguos teléfonos celulares diminutos proto-html de años anteriores que ni siquiera podían realmente mostrar páginas web. El ePUB, MOBI, Tablet, la comunidad de vendedores todos dijeron enfáticamente: "H * ck no, somos no@media handheld dispositivos!" 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 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 fuentes, sea 2 veces más pequeño.

Answer 4

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

Answer 5

Mira usando la consulta de medios 'hover'.

poner esto en su archivo SCSS:

// At this point the CSS would target screens above 990px - but only 
// if they support hover (i.e. 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 ronco etc en el SCSS esto producirá CSS que parece:

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