Gabi Gabi - 7 months ago 17
HTML Question

Scaling webpage on desktop at different resolutions

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

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 1024x768 resolution, without the need to manually zoom out in the browser?

Thanks!

Answer

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

So if your 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 1280x800, then you would want font-size: 1.25vw.

Comments