Question
Responsive no funciona en algunos dispositivos móviles
Hola Comunidad
Tengo una dificultad con una animación ya que se ve perfectamente en algunos dispositivos móviles, pero en otros esta animación se desplaza hacia arriba y se sale del margen de la pantalla .
Estoy usando Animate CC, con la configuración responsive. con ajuste de área visible y centrado.
Además le tengo activo el Viewport, a continuación el código HTML:
<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<meta property="og:title" content="Hector J Patiño">
<meta property="og:description" content="Respuesta Objetiva">
<meta property="og:image" itemprop="image" content="http://respuestaobjetiv.byethost7.com/LogoRespuestaObjetiva500.png">
<meta name="description" content="Hector J Patiño">
<meta name="apple-mobile-web-app-title" content="Hector J Patiño">
<meta name="DC.title" lang="es" content="Hector J Patiño">
<meta name="DC.description" lang="es" content="Tarjeta de Presentacion Digital">
<meta property="og:type" content="website">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!– for ios 7 style, multi-resolution icon of 152×152 –><meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!– for Chrome on Android, multi-resolution icon of 196×196 –><meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" sizes="16x16" href=http://respuestaobjetiv.byethost7.com/Respuetaobjetivaiconoredondo.png">
<link rel="shortcut icon" sizes="196x196" href="http://respuestaobjetiv.byethost7.com/Respuetaobjetivaiconoredondo.png">
<link rel="apple-touch-icon-precomposed" href="http://respuestaobjetiv.byethost7.com/Respuetaobjetivaiconoredondo.png">
<link rel="apple-touch-icon" href="icon-152.png">
<title>Hector J Patiño</title>
<!-- write your code here -->
<style>
#animation_container, #_preload_div_ {
position:absolute;
margin:auto;
left:0;right:0;
top:0;bottom:0;
}
</style>
<script src="Hector J Patiño.js"></script>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
var comp=AdobeAn.getComposition("238762F4A5056B40BB20DE2406CAB833");
var lib=comp.getLibrary();
createjs.MotionGuidePlugin.install();
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});
loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});
var lib=comp.getLibrary();
loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt, comp) {
var images=comp.getImages();
if (evt && (evt.item.type == "image")) { images[evt.item.id] = evt.result; }
}
function handleComplete(evt,comp) {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
var lib=comp.getLibrary();
var ss=comp.getSpriteSheet();
var queue = evt.target;
var ssMetadata = lib.ssMetadata;
for(i=0; i<ssMetadata.length; i++) {
ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
}
var preloaderDiv = document.getElementById("_preload_div_");
preloaderDiv.style.display = 'none';
dom_overlay_container.style.display = canvas.style.display = 'block';
exportRoot = new lib.RespuestaObjetivabyethost7();
stage = new lib.Stage(canvas);
stage.enableMouseOver();
//Registers the "tick" event listener.
fnStartAnimation = function() {
stage.addChild(exportRoot);
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
//Code to support hidpi screens and responsive scaling.
AdobeAn.makeResponsive(true,'both',true,1,[canvas,preloaderDiv,anim_container,dom_overlay_container]);
AdobeAn.compositionLoaded(lib.properties.id);
fnStartAnimation();
}
</script>
<!-- write your code here -->
</head>
<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:543px; height:850px">
<canvas id="canvas" width="543" height="850" style="position: absolute; display: none; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:543px; height:850px; position: absolute; left: 0px; top: 0px; display: none;">
</div>
</div>
<div id='_preload_div_' style='position:absolute; top:0; left:0; display: inline-block; height:850px; width: 543px; text-align: center;'> <span style='display: inline-block; height: 100%; vertical-align: middle;'></span> <img src=images/_preloader.gif style='vertical-align: middle; max-height: 100%'/></div>
</body>
</html>
AdChoices