• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Responsive html5 animation not scaling to fit on mobile

Community Beginner ,
Jan 14, 2024 Jan 14, 2024

Copy link to clipboard

Copied

I am very sorry, I am sure this is a stupid question, but I just can't seem to figure it out.

 

I have made a looping animation in Adobe Animate. I have gone into the publish settings and given it these settings:

Will28921269da8t_1-1705276601818.png

 

I want it to fill the vertical dimension of whatever window I have the browser set to including the mobile window.

 

On desktop it looks great and acts as expected:

Will28921269da8t_2-1705276726681.png

on mobile it does not:

Will28921269da8t_3-1705276791502.png

Nevermind that it is not centered, it is not scaling to vit the vertical dimension. There is a whole bunch of white space at the bottom.

 

I have tried changing all of those publish settings and nothing is working. Interestingly it shows the animation correctly for a quarter of a second before resizing it to this incorrect view. What am I doing wrong?

 

Thank you for any help that you can provide! Adobe Animate version 23.0.3

Views

394

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 14, 2024 Jan 14, 2024

Copy link to clipboard

Copied

The document dimensions are 1024x768 if that matters.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 15, 2024 Jan 15, 2024

Copy link to clipboard

Copied

Don't all speak at once! 

I don't know if my question is just really stupid, and Iam approaching this all wrong, or if nobody actually knows. I can't believe that nobody actually knows because this must be something that everybody is doing all of the time. If i am doing this in a wrong way could someone please enlighten me?

 

In the meantime I did a test and made a test file with the same dimensions as my animation. It is still being cropped off at the same vertical point.

Will28921269da8t_0-1705372774864.png

 

 

 

Then I changed the file and added a bunch of space to the vertical parameter at the bottom. It actually scales down smaller and crops off at the same point as before:

Will28921269da8t_1-1705372892600.png

So I am still completely flummoxed.

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 15, 2024 Jan 15, 2024

Copy link to clipboard

Copied

i think you have to hand code your app or setlle for close.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 16, 2024 Jan 16, 2024

Copy link to clipboard

Copied

Do you know the right way to do something like this? Should I have a separate mobile version of the scene? What is happening that it is getting cut off like this? I just want a full screen version of the scene on mobile!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 16, 2024 Jan 16, 2024

Copy link to clipboard

Copied

enable make responsive by width and height. 

 

try stretch to fit and fit in view to see which gives closer to what you want.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 16, 2024 Jan 16, 2024

Copy link to clipboard

Copied

yeah, I have tried pretty much every permutation of the responsiveness settings and it is just not working. I think I must have to do something with the code, I just have no idea what exactly.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guru ,
Jan 15, 2024 Jan 15, 2024

Copy link to clipboard

Copied

I can't help, but just wanted to say:

 

What a beautiful, cozy scene!

Very nice color and designs!

 

Nick - Character Designer and Animator, Flash user since 1998
Member of the Flanimate Power Tools team - extensions for character animation

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 16, 2024 Jan 16, 2024

Copy link to clipboard

Copied

Thanks!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 18, 2024 Jan 18, 2024

Copy link to clipboard

Copied

I am now trying to take away the responsiveness in publish settings and see if I let squarespace handle that if it will work better.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 18, 2024 Jan 18, 2024

Copy link to clipboard

Copied

it'll be a guaranteed mess if they're both resizing 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jan 18, 2024 Jan 18, 2024

Copy link to clipboard

Copied

Hmm, try adding the following meta tag to your head tag?
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 19, 2024 Jan 19, 2024

Copy link to clipboard

Copied

LATEST

@joejoe_jack 

 

that fails with a desktop browser.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines