iOS 8 Web App Startup Image

/ / Blog, Digital Development
Resultados de la misión comercial de keensoft en Colombia
Nuevo iTunes Connect

Después de trabajar en la optimización de las aplicaciones híbridas con iOS 8, hemos encontrado que hay que añadir las nuevas proporciones de pantalla del iPhone6 y del iPhone 6 Plus. En cuanto a las aplicaciones nativas las proporciones son las que se indican en la web Human Interface Guidelines de Apple, dónde especifica:

For iPhone 6:

  • 750 x 1334 (@2x) for portrait
  • 1334 x 750 (@2x) for landscape

For iPhone 6 Plus:

  • 1242 x 2208 (@3x) for portrait
  • 2208 x 1242 (@3x) for landscape

En el caso de usar safari mobile, para usar “apple-touch-startup-image” en nuestra webapp (permite mostrar splashscreen cuando la web app se encuentra en el home screen del iPhone/iPad), hay que tener en cuenta que el tamaño del status bar es de 20px para la resolución base. Lo que significa que para las resoluciones retina @2 este valor se multiplica por 2 en el caso del nuevo iPhone 6 Plus @3 por 3. Por ello, cuando incluyamos la pantalla de arranque, hay que restar dicho tamaño a la altura total del dispositivo, de tal manera que el código a incluir en nuestro HTML quedaría así:

<!– iOS 8 iPhone 6 (portrait) –>
<link rel=”apple-touch-startup-image” href=”apple-touch-startup-image-750×1294.png”
media=”(max-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)”>
<!– iOS 8 iPhone 6 Plus (portrait) –>
<link rel=”apple-touch-startup-image” href=”apple-touch-startup-image-1242×2148.png”
media=”(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)”>

Las siguientes imágenes son las usadas en el código anterior:

apple-touch-startup-image-750x1294

apple-touch-startup-image-750×1294

apple-touch-startup-image-1242×2148

apple-touch-startup-image-1242×2148

 

My life is mobile, think in mobile, go everywhere with my mobile and most of the times call with my mobile.

1 Comment to “ iOS 8 Web App Startup Image”

  1. […] Muñoz / Miércoles, 24 septiembre 2014 / Publicado enBlog iOS 8 Web App Startup Image La agenda de keensoft en el Alfresco Summit 2014 […]