Restrict the width and height of the viewport in the web site

Question

I am developing a responsive website. For this website the padding and width of the elements are in proportion of the width and/or height of the web page. So I have preferred to use the viewport related units (vh, vw). Everything scaling absolutely fine till the time I got a new requirement...

Now I have to put the max width and height to my webpage. max width of 1366px and max height of 768px. So I have added max-height and max-width css styles to my html tag.

Web content is now restricted in this range, but still the padding and width is getting calculated considering the whole width and height of the page as viewport.

For eg. if screen width is 1500px then 10vw is calculated as 150px. But what I need is it should not exceed 136.6px as max width is 1366px.

So is there any way to restrict the width and height of the viewport? Like <meta name="viewport" content="width=device-width, max-width=1366, max-height=768, initial-scale=1">

Answer 1

If you are required to have fixed sizes for your viewport, there is no point in using viewport-relative measures like vh, in some cases you'll manage to do the trick with percentages, but I wouldn't recomment it.

The best way to do this is to edit the viewport with javascript, there are a couple ways of getting the widths and heights of screens in JS

Again, as @hungerstar mentionned in a comment, it is not recommended to have fixed viewport sizes, so make sure you really have this requirement before you jump into it.

Hope it helps