Responsive not working on mobile

[kingmonkey]

Hi

I've got a situation where after selecting the make responsive and both settings in the publish settings so I have;

makeResponsive(true,'both',true,1);

In my script.

The animation scales with the browser window and even in Responsive design mode in safari. But if you actually view it on a phone (in this case an iPhone7) it doesn't resize properly.

The url is;

http://energy.fullfatwebsitedesign.co.uk

And the iPhone view looks like this;

Is there another setting I need to make?

Regards

Wayne

[kingmonkey]

I've also tried adding 'Scale content' in the document settings, but its the same result.

Anything else to try?

[Preran]

I am asking around for help. Stay tuned.

[JoãoCésar · Accepted solution]

Hi.

This is because the scale type you chose is more geared toward animations or games like it used to be before when te content was scaled keeping the aspect ratio and borders were added if needed. The same way that happens with video on TVs.

In your case, as you are building a website, it is best to set the 'Scale to fill visible area' to 'Stretch to fit'. In this way, the content will scale but there will be no borders.

More info about this subject:

"Center Stage

Allows users to select if the stage should be centered Horizontally, Vertically or Both. The HTML canvas/stage is displayed at the center of the browser window by default.

Make Responsive

Allows users to select if the animation should be responsive with reference to Width, Height, or both and resizes the published output based on various form factors. The result is a responsive, sharper and a crisper HiDPI compliant output.

The output also stretches to cover the entire screen area with no borders, and yet maintains the original aspect ratio, though some part of the canvas may not fit in view.

• Width, Height or Both options ensures that the entire content is scaled down to the canvas size and is visible even when you view on a small screen (such as mobile devices or tablets). If the screen size is larger than the authored stage size, canvas is displayed in the original size.

Enable Scale to Fill Visible Area

Allows users to select if the animation should fit to view the output in full screen mode or should stretch to fit. By default, this option is disabled.

Fit in view: Displays the output in Full screen mode with the entire screen space and yet maintains the aspect ratio.

Stretch to fit: Stretches such that there are no border spaces in the output."

Create HTML5 Canvas documents in Animate CC

Regards,

JC

[kingmonkey]

Hi JoãoCésar

Thanks for your reply. I've tried that, but its resulted in the animation not resizing correctly when you resize the browser window, and on the mobile the animation disappears completely.

Energy Bureau | Pay less to power your business

Its weird as the original settings worked brilliantly when resizing the browser window (safari responsive mode), but when you actually viewed it on a mobile, it wasn't resizing correctly. The above link is now with the Stretch to fit setting...

Not sure what to try next? I've read the article in the link provided.

Regards

Wayne

[JoãoCésar]

Hi.

As you're mixing Animate/Canvas with DOM code, maybe things are conflicting.

Have you tried only loading the animation generated by Animate CC?

I think is worth trying to see the results.

[kingmonkey]

Thanks JoãoCésar

Your idea got me thinking and I uploaded the published html and js file. I also added <meta name="viewport" content="width=device-width, initial-scale=1"> to the html to view it on mobile and it worked.

After checking my site file it had <meta name="viewport" content="width=device-width">, so I added the initial-scale=1 too and its viewing fine now.

Regards

Wayne

[JoãoCésar]

This is excellent, Wayne! Glad to know!