How to make sure your code fits in every phone?

Question

When writing JavaScript based codes(especially with canvas),how do I make my code fit into every phone.Like when you specify a width and height of 200 for an object,200 on an a small phone still looks the same as 200 on a tablet meaning it isn't based on the devices width/height.How do I solve this problem

Answer 1

I think we can use 100%
//dunno if I am right or wrong (I am from non web)

Answer 2

not sure to be honest, but maybe you can use @media queries?

Answer 3

thnx @ice for correcting me
looks like I've to gain some basic knowledge in Web languages too

Answer 4

Math it out. Try to yet the maximum aspect ratio such that the distribution of points is similar, but not distorted.
Like, if your device is 200px by 365px, try to find another 40:73 ratio that maximises space in code playground, for example, in a 400px by 765px device, the dimension is 400px by 730px.
Once you find the scale ratio, adjust your numbers accordingly.

Answer 5

@Saurabh that would work if he doesnt want 200x200px specifically

Answer 6

@Jay You could, but if your screen size is lets say 1920x1080, the element will be ~490px. If your screen size is 1280x720 it will be ~320px. See the difference?

Answer 7

you can check my code, i use % for fit screen.

https://code.sololearn.com/Wn7Gkz968ccI/?ref=app

hope it help.

Answer 8

That is what I think too

Answer 9

I’m not a web designer so I can’t teach it to you, but “@media query CSS” is what you need to google to get started.
That’s the standard way to make sure web components stay the proper proportions when on different display sizes.

They also work when resizing a browser on a desktop.