Menu
Giving a meta tag attribute "user-scalable=no" will restrict the user from zooming elsewhere. Prevent zooming all together by adding this meta tag to your head tag. This tells the mobile browser to use the same width scale and will not allow the user to zoom in at all, hence also disables that annoying behavior.
You should set body and html to position:fixed; , and then set right: , left: , top: , and bottom: to 0; . That way, even if content overflows it will not extend past the limits of the viewport. Caveat: Using this method, if the user makes their window smaller, content will be cut off.
Solved it as follows,
in CSS
#my{
zoom: 100%;
}
Now, it loads in 100% zoom by default. Tested it by giving 290% zoom and it loaded by that zoom percentage on default, it's upto the user if he wants to change zoom.
Though this is not the best way to do it, there is another effective solution
Check the page code of stack over flow, even they have buttons and they use un ordered lists to solve this problem.
In js you can change zoom by
document.body.style.zoom="90%"
But it doesn't work in FF http://caniuse.com/#search=zoom
For ff you can try
-moz-transform: scale(0.9);
And check next topic How can I zoom an HTML element in Firefox and Opera?
A better solution is not to make your page dependable on zoom settings. If you set limits like the one you are proposing, you are limiting accessibility. If someone cannot read your text well, they just won't be able to change that. I would use proper CSS to make it look nice in any zoom.
If your really insist, take a look at this question on how to detect zoom level using JavaScript (nightmare!): How to detect page zoom level in all modern browsers?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With