Why isn't window resizing properly? [Solved]

Question

So here I have window resize and window orientation for setting new canvas size but it is behaving very weirdly ,why so? Ty in advance!

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

Answer 1

Abhay also add
<meta name="viewport" 
content="width=device-width, initial-scale=1.0"/>

Answer 2

Kode Krasher looks nice ,ty for that,
Also i was talking about YouTube vids ,I am sure most do watch in phone ,atleast I do

Answer 3

Kode Krasher thks but I am coding from sololearn playground and I don't see those reports ,about === instead == ,thks for mentioning that

See I am on my phone coding and when I change the orientation angle to landscape and then back to portrait mode the problem occurs ,window doesn't resize properly ,it logs out window width as 612 instead of 360 ,first it goes 360 when the window opens ,then 640 on changing angle to landscape mode then 612 after rotating again and so canvas also doesn't resize because of this

About orientation ,I was going through tutorials on how would I resize my canavs to fit device ,one article had listening for orientation and resize events saying that orientation would work well when mobiles are rotated and resize for desktop ,so I thought adding both event would be better although resize works fine but still in case it doesn't in case of any orientation, then that other event will handle it

Answer 4

Ty very much Mirielle and BroFar

Answer 5

Kode Krasher ty very much☺️ that's what I wanted to hear! And thks for suggestion

Answer 6

Kode Krasher ty for that info but it wasn't working well for my device before I made the changes as suggested above

That must be really not so good experience watching videos in that portrait mode😐!

Answer 7

Kode Krasher I am calculating new x ,y, width and height for the figure using this

newX+=canvas.width*(20/344);
newY+=canvas.height*(20/492);
newWidth+=canvas.width*(40/344)
newHeight+=canvas.height*(40/492);
heart_posX=canvas.width*(150/344);
heart_posY=canvas.height*(170/492);

150 and 170 are x and y position for centering the figure according to my device resolution

Answer 8

Kode Krasher thks a lot😊 ,I was worried about how would it look in devices with width greater than height

Answer 9

Kode Krasher indeed!
Also does it works nicely as of now? I made a little change because for a resolution 624×212(landscape mode) it was really off from center and was bigger than canvas size

Answer 10

Kode Krasher thks a lot and sorry if I am asking for much! , And I think 624×212 resolution is unlikely to be used but it should still look good because with the current calculations it stretches the figure a lot as width is quite big in landscape one ,happy coding to you as well!✌️