how to set zoom level using css
I have been developing my webapp with a certain zoom level on fi开发者_运维知识库refox that I set initially (using ctrl+wheel). Now when tested on a different PC on firefox, the default 100% seems to be too big. Can I set default using css?
<html>
<body>
<div id="sampleDiv" style="width: 100px; background-color: Gray;">
Zoom Me
</div>
<button onclick="sampleDiv.style.zoom='300%'">Zoom 300%</button>
<button onclick="sampleDiv.style.zoom='200%'">Zoom 200%</button>
<button onclick="sampleDiv.style.zoom='100%'">Zoom 100%</button>
</body>
</html>What DA said, zoom is a user controlled setting, but you can size things relative to the zoom, and if users don't use Ctr + - to size, but change the sizing by setting a default font size, you can can over-ride this default setting by setting a font-size in pixels (as opposed to ems, %, etc.).... This however, is generally considered bad practice, since it may make the lettering / sizing illegible and unchangeable to some people, who don't know about Ctr + - and rely on a default font size.
You can adjust sizing relative to the user defaults and zoom setting by setting the font-size in ems or %. This will change the sizing of things relative to the user set sizing.
This enables you to make each page look to another person how it looks to you.... since each person's perception of "small," "medium," and "large" is different.
You can set the zoom using the CSS property zoom. It's an old IE thing which is also supported in Chrome, and Safari.
.zoom
{
zoom: 120%;
}
However, this probably shouldn't be used on live sites...
The page zoom is a browser feature, not a CSS setting (well, except for that IE proprietary thing, which is really more useful for fixing IE bugs than anything) so it is a user-controlled variable rather than anything you have control over.
加载中,请稍侯......
精彩评论