Quiero cargar imágenes de mayor resolución para usuarios de iPhone 4, pero la única manera que conozco de detectar usuarios es a través de un agente de usuario. Pero tengo la impresión de que el usuario-agente de MobileSafari en cualquier teléfono iOS4 es el mismo en todos los ámbitos.¿Hay alguna manera de distinguir a un visitante de iPhone 3G/S de un visitante de iPhone 4?
¿Qué podría hacer para detectar un iPhone 4?
Puede utilizar las consultas de medios de CSS3 para detectar la relación dispositivo-píxel del iPhone 4 (cuántos píxeles CSS equivalen a un píxel de pantalla física). Luego, puede usar CSS para cargar imágenes de mayor resolución en lugar de las normales.
En la etiqueta <head> en su página web, añadir esto a hacer referencia a una hoja de estilo externa que sólo será cargado para el iPhone 4 usuarios:
<link rel="stylesheet" type="text/css" href="high_res.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" />
El atributo media especifica que sólo utilizan esta hoja de estilo para los dispositivos con una ración mínima de dispositivo-píxel de 2 (es decir, el iPhone 4). A continuación, puede añadir reglas CSS en high_res.css para reemplazar imágenes de baja resolución con versiones de alta resolución:
#highres-if-possible {
background-image: url(high_res_pic.png);
}
Tenga en cuenta que tendrá que especificar la imagen en HTML utilizando la propiedad CSS background-image en lugar de la src atributo.
Ejemplo: una imagen de 60x50 para, reemplazar:
<img id="highres-if-possible" src="low_res_pic.png">
con
<img id="highres-if-possible" style="width: 60px; height: 50px; background-image: url(low_res_pic.png);">
No hay garantía de que las imágenes que especifican como esto funcionará en todos los navegadores (Internet Explorer), pero que debería funcionar bien en navegadores compatibles con estándares (y en el iPhone).
Para obtener más información sobre las consultas de medios de CSS3 y utilizarlos para detectar el iPhone 4, véase: http://blog.iwalt.com/2010/06/targeting-the-iphone-4-retina-display-with-css3-media-queries.html
ACTUALIZACIÓN: me encontré con this post y this post que podrían tener una mejor manera de manejar la especificación de las imágenes usando CSS (usando <img style="background-image:url(http://.. .)"> en vez de <img src="http://...">) que lo que tengo arriba.
usando la cadena HTTP_USER_AGENT probablemente pueda averiguar de cuál se trata. Nunca lo intenté, pero si debería comenzar. También he visto un par de bibliotecas de PHP que lo harán por ti. espero que esto ayude. aplausos.
posible duplicar: http://stackoverflow.com/questions/3262432/ donde el OP indica que es posible detectar el tamaño de la pantalla desde js. – mvds
http://stackoverflow.com/questions/3354246/javascript-iphone-selection/3354478#3354478 Tal vez de ayuda. –