¿Por qué los banners de aplicaciones inteligentes están parcialmente / completamente ocultos en Safari cuando tengo una window de visualización especificada?

Quiero agregar pancartas de aplicaciones inteligentes para vincularlas a una aplicación en la App Store de Apple. Parece que funciona bien cuando no tengo un metatag de window de visualización especificado. Si tengo una window gráfica completamente mobile, el banner de la aplicación inteligente está oculto completamente "detrás de la barra de direcciones" después de la carga de la página, y si tengo una window con el ancho 840 especificado, la barra de direcciones oculta parcialmente el banner de la aplicación inteligente.

¿Por qué es esto y puedo hacerlo para que el banner de la aplicación inteligente siempre se muestre por completo?

Trabajando sin window

El banner de la aplicación inteligente se muestra correctamente. Puedes desplazarte para ocultarlo.

<meta name="apple-itunes-app" content="app-id=284882215"> 

Página de testing

Corrija la bandera de la aplicación inteligente

Totalmente oculto, receptivo

El banner de la aplicación inteligente está oculto detrás de la barra de direcciones (puedes ver un logotipo de Facebook azul borroso). Puede desplazarse para ocultar / mostrarlo.

 <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="apple-itunes-app" content="app-id=284882215">``` 

Página de testing

Bandera de la aplicación inteligente completamente oculta

Parcialmente oculto, ancho de vista = 840

El banner de la aplicación inteligente está parcialmente oculto detrás de la barra de direcciones. Puede desplazarse para ocultarlo / mostrarlo por completo.

 <meta name="viewport" content="width=840, user-scalable=yes" /> <meta name="apple-itunes-app" content="app-id=284882215"> 

Página de testing

Banner de aplicación inteligente parcialmente oculta

Esto solo puede probarse realmente en Safari en un iPhone real, y es más fácil hacerlo en modo privado, ya que la apariencia del banner de la aplicación inteligente cambia si se desplaza / recarga la página.

Inicialmente forzar la window para desplazarse hacia arriba resolvió el problema para mí.

 <script type="text/javascript"> $(window).load(function() { $(window).scrollTop(-100); }); </script> 

Use <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1"> y mostrará el banner inteligente.

Este problema también afecta a los banners de enlaces de aplicaciones universales .

Una solución de JavaScript vainilla que funcionó para nosotros fue:

 window.onload = function() { window.scrollTo(0, -100); };