iPhone 4 Retina "apple-touch-startup-image" para aplicaciones web
web-applications mobile-safari (5)
Esto se ha pedido varias veces aquí, pero sin una respuesta sólida y comprensible. Esta es una aplicación web , no una aplicación nativa.
Estoy usando:
<link rel="apple-touch-startup-image" href="images/startup.png" />
para visualizar la imagen de inicio. Se carga bien si la resolución de la imagen es 320x460. Intenté usar la resolución de la retina, que es de 640x920 (40px se eliminan en la barra de estado), pero no funcionó. He intentado la cosa @2x , que también falló.
¿Es posible [todavía]?
Acabo de hacer la prueba ... Apple ha agregado el atributo "tamaños". así que, para alta resolución, agregas tamaños = "640x920", etc. Supongo que esto también funciona para diferentes orientaciones
Entonces, si entiendo bien, necesitamos 8 imágenes diferentes, ya que tenemos 3 parámetros a tener en cuenta:
- Dispositivo (iPhone o iPad)
- Resolución (retina o no)
- Orientación (retrato o paisaje)
Estoy en lo cierto
Esto agregará una pantalla de bienvenida a su aplicación web. A continuación se muestran los tamaños que necesitará tanto para iPad como para iPhone / iPod Touch, que también incluyen el área de la barra de estado.
<!-- iPhone -->
<link href="http://www.example.com/mobile/images/apple-startup-iPhone.jpg" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPhone-RETINA.jpg" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 5 -->
<link href="http://www.example.com/mobile/images/apple-startup-iPhone-Tall-RETINA.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad Portrait -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-Portrait.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<!-- iPad Landscape -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-Landscape.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<!-- iPad Portrait (Retina) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Portrait.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad Landscape (Retina) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Landscape.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
Si está creando una aplicación web para compatibilidad con iPad, se recomienda que se utilicen los tamaños horizontal y vertical.
Esto funciona para mí:
<link rel="apple-touch-startup-image" media="screen and (max-device-width: 320px)" href="images/iphone_splash.png"/>
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="images/iphone_splash_hires.png" />
La documentación (encontrada here ) dice:
En el iPhone y el iPod touch, la imagen debe ser de 320 x 460 píxeles y en orientación vertical.
He probado proporcionar diferentes tamaños, pero si el tamaño no es exactamente 320x460, la imagen simplemente se ignora. Apple no dice claramente si es posible incluir imágenes de inicio de alta resolución, pero las publicaciones del foro (por ejemplo, aquí: Foro de desarrolladores de Apple ) sugieren que actualmente no es posible.