Issue
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?
Thanks!
Solution
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