Recently, I created a website tailored for a viewport size of 1366px by 768px. My goal is to maintain the same design regardless of the browser window size without implementing responsive design techniques.
For instance:
- When viewing the website on a 360px by 420px viewport, it should scale down to display the exact visible area as in the 1366px by 768px layout without any need for scroll bars.
- Conversely, when viewed on a 2000px by 1000px viewport, the site should scale up to show the same visible area as in the original layout without added white space.
I have attempted to achieve this using the following code snippet:
<meta name="viewport" content="width=1366, initial-scale=1" />
const siteWidth = 1366;
const scale = screen.width / siteWidth;
document
.querySelector('meta[name="viewport"]')
.setAttribute(
'content',
'width=' + siteWidth + ', initial-scale=' + scale + ''
);
}
However, while this code successfully scales the website based on the width for mobile devices, adjusting the height results in extra space or scroll bars at the bottom. Furthermore, this method does not work effectively on desktops.
Is there a better solution available that would allow me to accurately scale my website for all viewports?