Skip to main content
K
kingmonkey
Known Participant
April 29, 2018
Answered

Responsive not working on mobile

  • April 29, 2018
  • 2 replies
  • 1846 views

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

This topic has been closed for replies.
Correct answer JoãoCésar17023019

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

2 replies

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community ExpertCorrect answer
Community Expert
May 2, 2018

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

K
kingmonkeyAuthor
Known Participant
May 2, 2018

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ésar17023019
Community Expert
JoãoCésar17023019Community Expert
Community Expert
May 2, 2018

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.

K
kingmonkeyAuthor
Known Participant
April 30, 2018

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

Anything else to try?

Preran
Preran
Legend
May 2, 2018

I am asking around for help. Stay tuned.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices