Hace un tiempo encontré un pequeño error cuando se agregó html5 a la pantalla de inicio de iOS. Con la aplicación web abierta, durante los cambios de orientación de la pantalla, el lienzo no se escala correctamente.

Es porque el código resizeCanvas de Animate se activa demasiado rápido. Así que agregué un setTimeout dentro de resizeCanvas para retrasarlo un poco:

He estado editando mis archivos html después de cada exportación. Pero es hora de que haga una plantilla de publicación personalizada. Sin embargo, tengo un problema al tratar de hacer que el código funcione.

En la plantilla html predeterminada, la función resizeCanvas está dentro del token/variable $ANIMATE_CC_SCRIPTS de javascript de Animate:

En mi plantilla de publicación personalizada, agregué un script después del token $ANIMATE_CC_SCRIPTS . no funciona:

 // Added below $ANIMATE_CC_SCRIPTS in the template html <script> window.addEventListener('resize', delayedResizeCanvas); function delayedResizeCanvas() { setTimeout(function(){ resizeCanvas(); }, 100); } </script>

La única forma en que el código parece funcionar es cuando agrego setTimeout dentro de resizeCanvas . Solo puedo hacer eso después de exportar.

Traté de buscar en las carpetas de Animate donde se guardan los tokens/variables de javascript de la plantilla. Pensé en copiar un duplicado y cambiarle el nombre a $ANIMATE_CC_SCRIPTS_2 para no estropear el predeterminado. Sin embargo, no puedo encontrarlos.

¿Hay alguna manera de hacer que el código setTimeout funcione fuera de resizeCanvas ?
¿O para editar el token/variable javascript $ANIMATE_CC_SCRIPTS ?

Actualización: Gracias a Muhammed Maruf, funciona agregar un setTimeout a la función AdobeAn.makeResponsive. Solo puedo agregar este script a mi plantilla de publicación personalizada y no necesitaré editar ningún archivo html exportado.

 <script> window.addEventListener('resize', delayedResizeCanvas); function delayedResizeCanvas() { setTimeout(function(){ AdobeAn.makeResponsive(true,'both',true,1,[canvas,anim_container,dom_overlay_container]); }, 100); } </script>

Actualización 2: parece que este método solo funciona para un solo cuadro. Para proyectos de películas en los que la línea de tiempo se reproduce en varios fotogramas, se activa una o dos veces y luego el lienzo ya no se vuelve a escalar.

Agregar un setTimeout dentro de resizeCanvas hace que el lienzo se escale de manera consistente, pero solo tendré que editar el archivo html manualmente después de cada exportación.