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?
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
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?
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.
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.