Scaling webpage on desktop at different resolutions


I have a webpage which has a fixed layout.
It was built using standard size of 1280×800.

Since it doesn’t need to be mobile compatible, and not accessed by the public, it was built using fixed size elements.

The problem is, I need it to scale automatically according to browser size.

I managed to do it with the viewport metatag, but that works only for mobile browser (which I do not need…)

e.g. How can the page display correctly, when opened in Chrome on a desktop with 1024×768 resolution, without the need to manually zoom out in the browser?



Replace every px with a vw based on the ratio of the width to the size at 1280×800.

So if you had a div with width: 1280px you would replace it with width: 100vw.

Set your font-size on the body in this way to get the text to scale, and use em or rem to size larger text.

If your font size was 16 at 1280×800, then you would want font-size: 1.25vw.

Answered By – Carson Crane

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published