Mobile Width issue

Problem: I created the size of the ecard based on 1024x768 pixel.

On mobile, either IOS or Android it didnt fit nicely on the mobile.

I added the code
Because we dont want the zoom in feature everytime user load the page.
this works fine for another design because there is not frame.

but for this design now it looks cut off.

Saola Animate version: 1.1.0

OS: Mobile Safari, Mobile Chrome for Android ver 63

Notes:

please view the ecard at http://www.steffeno.com/mapletree/cny2018/opt03/

how do i ensure width is fixed to mobile width without having the zoom in scaling feature.

Thanks,
Steffen

Hi Steffen,

You create the ecard at 1024x768 pixel so it’ll be displayed at that size on any device if you don’t add script to scale it.
You said that you added the code but the ecard looks cut off. Did you mean the code to scale entire HTML5 document in this post: Support Responsive Design? If so I see that it works fine with this ecard too, I don’t see anything is cut off. Can you please share a screenshot?

Regards.

Dear Toan,

Thank you for your response.

Problem is that the scaling feature for the viewport, causes the whole animation to scale from small to big in very bad way, and by the time it reach full width and height of the canvas, the animation is almost finished.

I solve this by preventing the scaling by editing the html file with this code.

.

I just tried removing this line of code (now i have 2 scene). and it solve the problem :slight_smile:

Thanks for the quick response.

This is resolved.

Thanks!
Steffen

Hi Steffen,

Glad to hear that the issue is resolved!
So you only want to scale down the ecard when the browser size is smaller than the base ecard size, not scale up when the browser size is larger than the base ecard size? Is that right?

Regards.

Hi Toan,

actually i created a christmas ecard using saola.

http://www.steffeno.com/mapletree/v2/mapletree.html

I added the viewport code of no user scalable because without it, on mobile web browsers, it will scale from really small to a full width of the mobile in a very slow manner fashion. By the time it scale to the full mobile size, the animation is almost at the end.

Cut off is probably not a right description. basically on mobile, the canvas went over the screen to the right by maybe 5-10px.

Cheers,
Steffen

You have animations which move elements out of the scene boundary so that this behavior occurs. You just need to set Overflow Hidden on the Scene Properties pane to prevent it.

Thannks Toan!

Will not that for my next saola project

Steffen