How to lock window screen size to 16:9 in angular application-CodePudding

I would like to know how to go about locking the screen ratio to be in a 16:9 format in angular, no matter the screen size or orientation of the screen.

I am working on a kids web app and I need to keep the screen size as is, we are migrating from a dvd format to web app.

Thanks

CodePudding user response：

If you need to keep the display of your app to a 16:9 ratio, you could set some fixed width and height with a overflow hidden and center your main display inside your html.

You would then need to use some @media queries in order to keep the layout responsive for tablets and phones. Good luck, because it will be a nightmare keeping everything well aligned and proportionate :)

CodePudding user response：

To always use the full width and adjust the height to be in 16:9 format, you can set the height to 56.25% (9 / 16) of the viewport width, using CSS:

body {
  height: 56.25vw;
}