Resize page size

Question

Is there a way I can resize page to a certain size?
My phone screen resolution 1600x720px(20:9 ratio), while many services and devices use 16:9 ratio(which would be 1280x720px for a phone). I'm trying to resize a page to be that ratio so the important, or basically everything of the webpage stays at center and there would be empty areas at both sides of it. This would allow me to properly screen record/screenshot the page and then crop it to 16:9 ratio, without cutting of anything of the webpage. To properly see what I mean please see this img: https://www.sololearn.com/post/1788404/?ref=app

The red area(1280x720, or 16:9) here is the area I want the page to be within. The rest of the area at left and right sides would be cropped off the image/video, so the page needs to fit inside the red area.
How can I achieve this?

Note that I would like to do this in other websites, not just my own, so I'm expecting for something like a JavaScript code I would run in console.

Answer 1

You can't just use @media screen? For example, if any screen is bigger than the wanted size, you'd keep everything in the div at that size/ratio.

Answer 2

Hi,
U should look into user scripts and browser plugins. But i dont think this is the best place to ask that kind of question.