'How to prevent scaling of a web page

I am designing a web page that occupies only 80% of the horizontal space. On restoring the browser, the web page scales down automatically which makes it look very cluttered. I want that even on resizing the browser window, the web page does'nt get scaled but just gets scrollable. That is its size remains the same and it can be scrolled.

htmlcss


Solution 1:[1]

If you want a fixed width you need to set a width if you didn't already.

body { width: 900px; }

could do it, unless there are more styles which override it.

Solution 2:[2]

If you want to prevent the user from scaling the page by pressing Ctrl +, Ctrl - or Ctrl Mousewheel, maybe the following piece of code can work for you:

document.body.addEventListener("keydown", (event) => {
    if (event.ctrlKey) { event.preventDefault() }
});

This will prevent the user from using the Ctrl key, so any functionality related to that would be lost.

Solution 3:[3]

You'll need to define the site's initial scale and how zooming will be done. Add this tag to the <head> section:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Simon Lindgren
Solution 2 Gark Garcia
Solution 3 Skatox

Related Questions