Browser zoom does not work with my CSS

Asked

Viewed 509 times

4

I have inside the tag body 3 Divs with height defined in pixels and width in percentage. When the person types CTRL+ browsers zoom up to 500%.

My problem is that the zoom doesn’t work.

I tried to define, in the body tag and in the 3 ids defined in the 3 Divs: top, body and footer. In my case I defined the overflow-y as scroll and Divs with min-width and width of 100 and max-width of 500% but it’s not solving.

<body>
    <div id="todo">
        <div id="topo"></div>
        <div id="corpo">
        </div>
        <div id="rodape"></div>
    </div>
</body>

CSS:

/* 
    Created on : 31/05/2014, 23:25:56
    Author     : willian
*/

body {
    margin: 0;
    padding: 0;
    min-width: 100%;
    width: 100%;
    max-width: 500%;
    overflow-x: scroll;
}

#todo {
    margin: 0;
    padding: 0;
    min-width: 100%;
    width: 100%;
    max-width: 500%;
    overflow-x: auto;
}

#topo {
    margin: 0;
    padding: 0;
    height: 200px;
    min-width: 100%;
    max-width: 500%;
    background: #fefcda;
    overflow-x:auto;
}
#corpo {
    margin: 0;
    padding: 0;    
    height: 800px;
    min-width: 100%;
    max-width: 500%;
    background: #faf9ed;
    overflow-x: auto;
}
#rodape {
    margin: 0;
    padding: 0;    
    height: 300px;
    min-width: 100%;
    max-width: 500%;
    background: #fefcda;
    overflow-x: auto;
}
html css

  • Can I ask what your code’s intent is? I know the problem you want to solve, but there are a few things in your CSS that I don’t understand. NOTE: The zoom worked normally here: Chrome Version 34.0.1847.137

1 answer

3

Via CSS you have no control over the ability of the browser to do or fail to enlarge the page.

This type of indications are passed to the browsers through META TAGS placed in the section <head></head> where we can give instructions like:

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

Here yes, you can indicate that the page starts at a scale of 1 and the maximum distance to go is 1, thus disabling the zoom in the browser.

Note:

user-scalable=0  (não deixa o utilizador fazer zoom)
user-scalable=1  (deixa o utilizador fazer zoom)

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.