Making the web page fixed and un-zoomable

Question

I need to make my web page un-zoomable such that the divs don't collide each other or overlap each other. The stackoverflow site is a great example. In a case where the user zooms in the web page, the divs should be in their original positions.

enter image description here

When Zoomed, it's still fixed.

When Zoomed

What changes do I need to make to the CSS files?

http://stackoverflow.com/questions/14050841/disable-zooming-of-the-page-in-desktop-web-browsers-using-javascript-jquery — Radonirina Maminiaina, May 28 '15 at 06:50
http://stackoverflow.com/questions/4001256/how-do-you-prevent-firefox-from-zooming-in-when-pressing-ctrl-and — Radonirina Maminiaina, May 28 '15 at 06:51

score 1 · Accepted Answer · answered May 28 '15 at 06:51

1

You must be giving width in px. You should do it in percentage if you want your layout to stay right when you zoom in or zoom out

answered May 28 '15 at 06:51

user786

3,502
3
28
56

1

I am giving the width in px right now. Percentages should do the trick if I change both the height and width of all the divs? – Dinuka Jay May 28 '15 at 07:25
try doing that, I think this is what u are looking for – user786 May 28 '15 at 07:29

score 1 · Answer 2 · answered May 28 '15 at 07:04

On your containing elements, declare an specific width.

If you look at Stack Overflows following css, you can see that they set a width on their content block.

#content {
    width: 1000px;
}

The child elements within #content also have absolute widths set

#mainbar {
    width: 728px;
}
#sidebar {
    width: 220px;
}

I hope this helps.

score 0 · Answer 3 · answered Feb 10 '22 at 19:51

0

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'/>

this should work

answered Feb 10 '22 at 19:51

Ramy Hadid

24
3

Making the web page fixed and un-zoomable

3 Answers3