ipad - para - service worker ios safari

Múltiples resoluciones "apple-touch-startup-image" para la aplicación web iOS(especialmente para iPad)?

Question

He escrito una aplicación web iOS basada en HTML5 y parece que todo funciona bien, pero estoy tratando de pulirla con varias pantallas de inicio. El iPhone / iPod touch funciona bien con un PNG de 320x460, de la siguiente manera:

<link rel="apple-touch-startup-image" href="img/startup_screen-320x460.png" />

Encontré mucha documentación que dice que las imágenes de inicio para el iPad deberían, como el iPhone / iPod touch, tener el 20px afeitado desde la altura para acomodarse a la barra de estado dando resoluciones de 768x1004 (vertical) o 1024x748 (horizontal). Sin embargo, en mis pruebas (actualmente con un iPad con iOS 3.2.2), solo funciona la resolución 768x1004 (vertical) (pero es incorrecta -20 píxeles demasiado estrecha- cuando está en modo horizontal).

He intentado lo siguiente (una conjetura descabellada basada en la funcionalidad de los enlaces apple-touch-icon ), sin éxito:

<link rel="apple-touch-startup-image" href="img/startup_screen-320x460.png" />
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/startup_screen-1024x748.png" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/startup_screen-768x1004.png" />

Solo la imagen de resolución 768x1004 funciona si es el último elemento de link lista. Si la imagen de resolución de 1024x748 es la última, se renderiza un fondo gris en su lugar (pero nunca el 768x1004). Entonces, obviamente, el link apple-touch-startup-image no admite el atributo de sizes .

¿Esto es compatible con las versiones más nuevas de iOS? ¿Hay alguna forma de admitir múltiples imágenes de inicio? ¿Debo crear una imagen de inicio de 1024x768? Si es así, ¿se reducirá la escala del iPhone / iPod touch? ¿O debería abandonar y no tener una imagen de inicio para el iPad?

Answer 1

Aparentemente, la pantalla de inicio solo funciona bajo las siguientes condiciones

1) debe ser del tamaño exacto requerido por el dispositivo. 2) el dispositivo debe estar en orientación vertical cuando se inicia la aplicación. 3) algunas fuentes dicen que solo png pero jpg parece funcionar ahora.

Answer 2

De hecho, lo tengo para trabajar en modo paisaje. Obtuve la información aquí: https://gist.github.com/472519 .

El problema es que la imagen del paisaje tiene que ser de 748x1024 (una imagen de paisaje de lado, giré en el sentido de las agujas del reloj) en lugar de 1024x748.

También tuve que iniciar la aplicación en modo retrato primero y luego paisaje.

Answer 3

Esto puede ser obvio para algunos, pero la imagen de inicio no funcionaría para mí a menos que añadiera agregué un acceso directo a la pantalla de inicio, la ejecuté desde allí y tuve el siguiente código:

<meta name="apple-mobile-web-app-capable" content="yes" /> 

Esta página fue útil para descifrar todo esto: http://lineandpixel.com/blog/ios-web-app-icons-and-startup-images

Answer 4

He probado muchas veces, ahora estoy seguro de que funciona cuando actúas de esta manera: primero mantén la almohadilla en posición vertical, abre tu aplicación, luego mantén la aplicación en horizontal, abre tu aplicación. apesta, pero ... parece que esta es la única forma de hacerlo. primero tienes que sostener el retrato de tu pad para "desbloquear" el error.

Answer 5

La forma en que pude obtener 4 imágenes de inicio individuales para WebApps en el iPhone / iPad / iPhoneRetina fue una combinación de algunas cosas ...

IPhone sin Retina (320x460):

            <link rel="apple-touch-startup-image" href="startup-iphone.jpg" />

Retina iPhone (4 y 4S) (640x920): utilice la técnica Javascript publicada anteriormente. http://www.paulofierro.com/archives/568/

iPad (ambas orientaciones) es complicado. El paisaje debe ser de 748w x 1024h, con el "fondo" en el lado izquierdo. El retrato debe ser 768w x 1004h, con el "fondo" abajo. Tuve que incluir las etiquetas de iPad a través de PHP detectando el iPad en el agente de usuario, de lo contrario, la imagen de inicio del iPhone no retina no se cargaría. Aquí está el código ...

            <?php $isiPad = (bool) strpos($_SERVER[''HTTP_USER_AGENT''],''iPad''); ?>
            <?php if ($isiPad) { ?>
            <link rel="apple-touch-startup-image" href="startup-landscape.jpg" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
            <link rel="apple-touch-startup-image" href="startup-portrait.jpg" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
            <?php } ?>

Hacer lo anterior le permite a mi aplicación web (en realidad, un sitio simple de blog de wordpress, que actualmente trabaja en ella sin conexión) tener una imagen de inicio para iPhone, Retina y ambas orientaciones para iPad. Probado en iPhone 3G con la última versión de iOS 4, iPad y iPhone 4 con el último iOS 5.

Por supuesto, también podría incluir el código de iPad a través de javascript. lol

Answer 6

La solución más completa y esencial: https://gist.github.com/tfausak/2222823

Answer 7

Meta completa:

<!-- Icons -->

<!-- iOS 7 iPad (retina) -->
<link href="icon-152x152.png"
      sizes="152x152"
      rel="apple-touch-icon">

<!-- iOS 6 iPad (retina) -->
<link href="icon-144x144.png"
      sizes="144x144"
      rel="apple-touch-icon">

<!-- iOS 7 iPhone (retina) -->
<link href="icon-120x120.png"
      sizes="120x120"
      rel="apple-touch-icon">

<!-- iOS 6 iPhone (retina) -->
<link href="icon-114x114.png"
      sizes="114x114"
      rel="apple-touch-icon">

<!-- iOS 7 iPad -->
<link href="icon-76x76.png"
      sizes="76x76"
      rel="apple-touch-icon">

<!-- iOS 6 iPad -->
<link href="icon-72x72.png"
      sizes="72x72"
      rel="apple-touch-icon">

<!-- iOS 6 iPhone -->
<link href="icon-57x57.png"
      sizes="57x57"
      rel="apple-touch-icon">

<!-- Startup images -->

<!-- iOS 6 & 7 iPad (retina, portrait) -->
<link href="startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: portrait)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iOS 6 & 7 iPad (retina, landscape) -->
<link href="startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: landscape)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iOS 6 iPad (portrait) -->
<link href="startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: portrait)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">

<!-- iOS 6 iPad (landscape) -->
<link href="startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: landscape)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">

<!-- iOS 6 & 7 iPhone 5 -->
<link href="startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iOS 6 & 7 iPhone (retina) -->
<link href="startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iOS 6 iPhone -->
<link href="startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">

Answer 8

Pasé algún tiempo tratando de descubrir cómo crear una pantalla de presentación para el nuevo iPad (Retina), esta es mi solución probada y funcional para ambas orientaciones del nuevo iPad (Retina).

PD antes de publicar esto ya probé soluciones y no funcionaron.

<!-- iPad (Retina) (Portrait) -->
<link href="/img/ios/apple-touch-startup-image-1536x2008.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

<!-- iPad (Retina) (Landscape) -->
<link href="/img/ios/apple-touch-startup-image-2048x1496.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

Answer 9

Si desea orientar la visualización de la retina, encontré una solución y escribí en el blog aquí: http://paulofierro.com/blog/2011/8/31/icons-and-splash-screens-for-ios-web-apps-retina-displays-also-welcome

Básicamente, la propiedad de tamaños y las consultas de medios no funcionarán. Debe inyectar la imagen de inicio de alta resolución a través de JavaScript una vez que su página esté cargada. Hacky pero funciona

Answer 10

Si faltaba un elemento del enlace, las cosas de la propiedad multimedia no me funcionaban. El código muestra con éxito una imagen de inicio en un iPhone 3G y iPad (modo retrato y paisaje).

<-- iPad - landscape (748x1024) -->
<link rel="apple-touch-startup-image" href="images/ipad-landscape.png"  media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<-- iPad - portrait (768x1004) -->  
<link rel="apple-touch-startup-image" href="images/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
<-- iPhone - (320x460) -->
<link rel="apple-touch-startup-image" href="images/iphone-lowres.png" media="screen and (min-device-width: 200px) and (max-device-width: 320) and (orientation:portrait)" />

No podría intentarlo con el iPhone4 (alta resolución), pero lo más probable es que funcione de la misma manera.

Answer 11

Solo quería ofrecer una combinación de respuestas que realmente funcionó. Encontramos que con la respuesta que se seleccionó, las versiones retina de las imágenes splash no se estaban utilizando. La respuesta de Pavel arregló la versión de la retina para el iPad. Lo siguiente ha sido probado en iPhone (Retina y no retina) y iPad (retina y no retina).

<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
<!-- For iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<!-- iPhone SPLASHSCREEN-->
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) SPLASHSCREEN-->
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 460px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 5 (Retina) SPLASHSCREEN-->
<link href="apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (non-Retina) (Portrait) -->
<link href="apple-touch-startup-image-768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" rel="apple-touch-startup-image" />
<!-- iPad (non-Retina) (Landscape) -->
<link href="apple-touch-startup-image-1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" rel="apple-touch-startup-image" />
<!-- iPad (Retina) (Portrait) -->
<link href="apple-touch-startup-image-1536x2008.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!-- iPad (Retina) (Landscape) -->
<link href="apple-touch-startup-image-2048x1496.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

No puedo atribuirme el mérito de nada de esto, pero esta configuración funciona. Solo copie y pegue, asegúrese de hacer que las imágenes sean exactamente del tamaño indicado en sus nombres.

Answer 12

iPhone 6 y iPhone 6+

<link href="launch6.png" media="(device-width: 375px)" rel="apple-touch-startup-image"> <link href="launch6plus.png" media="(device-width: 414px)" rel="apple-touch-startup-image">

Desde este enlace: http://www.mobilexweb.com/blog/safari-ios8-iphone6-web-developers-designers

Answer 13

solución definitiva para la imagen de inicio y los iconos táctiles para iPad y iPhone (paisaje || retrato) y (retina || no):

        <!-- iPhone ICON -->
        <link href="apple-touch-icon-57x57.png" sizes="57x57" rel="apple-touch-icon">
        <!-- iPad ICON-->
        <link href="apple-touch-icon-72x72.png" sizes="72x72" rel="apple-touch-icon">
        <!-- iPhone (Retina) ICON-->
        <link href="apple-touch-icon-114x114.png" sizes="114x114" rel="apple-touch-icon">
        <!-- iPad (Retina) ICON-->
        <link href="apple-touch-icon-144x144.png" sizes="144x144" rel="apple-touch-icon">

        <!-- iPhone SPLASHSCREEN-->
        <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
        <!-- iPhone (Retina) SPLASHSCREEN-->
        <link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
        <!-- iPad (portrait) SPLASHSCREEN-->
        <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
        <!-- iPad (landscape) SPLASHSCREEN-->
        <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
        <!-- iPad (Retina, portrait) SPLASHSCREEN-->
        <link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
        <!-- iPad (Retina, landscape) SPLASHSCREEN-->
        <link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
        <!-- iPhone 6/7/8 -->
        <link href="/images/favicon/750x1334.png" media="(device-width: 375px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
        <!-- iPhone 6 Plus/7 Plus/8 Plus -->
        <link href="/images/favicon/1242x2208.png" media="(device-width: 414px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />