Html 如何使用 CSS 缩放整个网页？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1156278/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I scale an entire web page with CSS?
提问by Jon Galloway
Using Firefox, you can enlarge an entire web page by simply pressing CTRL+. What this does is proportionally enlarge the entire web page (fonts, images, etc).
使用 Firefox，您只需按 即可放大整个网页CTRL+。这样做是按比例放大整个网页（字体、图像等）。
How can I replicate the same functionality using simply CSS?
如何使用简单的 CSS 复制相同的功能？
Is there something like page-size: 150%(which would increase the entire page portions by x%?)
有没有类似的东西page-size: 150%（这会使整个页面部分增加 x%？）
回答by Jon Galloway
You might be able to use the CSS zoomproperty - supported in IE 5.5+, Opera, and Safari 4, and Chrome
您或许可以使用 CSSzoom属性 - IE 5.5+、Opera、Safari 4 和 Chrome 支持
Firefox is the only major browser that does not support Zoom (bugzilla item here) but you could use the "proprietary" -moz-transform property in Firefox 3.5.
Firefox 是唯一不支持 Zoom（此处为 bugzilla 项目）的主要浏览器，但您可以在 Firefox 3.5 中使用“专有”-moz-transform 属性。
So you could use:
所以你可以使用：
div.zoomed {
zoom: 3;
-moz-transform: scale(3);
-moz-transform-origin: 0 0;
}
回答by kumarharsh
This is a rather late answer, but you can use
这是一个相当晚的答案，但您可以使用
body {
transform: scale(1.1);
transform-origin: 0 0;
// add prefixed versions too.
}
to zoom the page by 110%.
Although the zoomstyle is there, Firefox still does not support it sadly.
将页面放大 110%。虽然zoom样式是有的，但遗憾的是Firefox仍然不支持它。
Also, this is slightly different than your zoom. The css transformworks like an image zoom, so it will enlarge your page but not cause reflow, etc.
此外，这与您的变焦略有不同。它的css transform工作原理类似于图像缩放，因此它会放大您的页面但不会导致回流等。
Editupdated the transform origin.
编辑更新了变换原点。
回答by Joey
Ifyour CSS is constructed completely around exor emunits, then this might be possible and feasible. You'd just need to declare font-size: 150%in your style for bodyor html. This should cause every other lengths to scale proportionally. You can't scale images this way, though, unless they get a style too.
如果您的 CSS 完全围绕ex或em单位构建，那么这可能是可行的。你只需要font-size: 150%在你的风格中声明bodyor html。这应该导致每隔一个长度按比例缩放。但是，您不能以这种方式缩放图像，除非它们也有样式。
But that's a very big ifon most sites, anyway.
但是，这是一个非常大的，如果大多数网站，反正。
回答by e100
As Johannes says -- not enough rep to comment directly on his answer -- you can indeed do this as long as all elements' "dimensions are specified as a multiple of the font's size. Meaning, everything where you used %, em or ex units". Although I think % are based on containing element, not font-size.
正如约翰内斯所说——没有足够的代表直接评论他的答案——你确实可以这样做，只要所有元素的“尺寸都被指定为字体大小的倍数。意思是，你使用 %、em 或 ex 的所有内容单位”。虽然我认为 % 是基于包含元素，而不是字体大小。
And you wouldn't normally use these relative units for images, given they are composed of pixels, but there's a trick which makes this a lot more practical.
考虑到它们由像素组成，您通常不会将这些相对单位用于图像，但是有一个技巧可以使这更实用。
If you define body{font-size: 62.5%};then 1em will be equivalent to 10px. As far as I know this works across all main browsers.
如果您定义，body{font-size: 62.5%};则 1em 将等价于 10px。据我所知，这适用于所有主要浏览器。
Then you can specify your (e.g.) 100px square images with width: 10em; height: 10em;and assuming Firefox's scaling is set to default, the images will be their natural size.
然后您可以指定您的（例如）100px 方形图像，width: 10em; height: 10em;并假设 Firefox 的缩放设置为默认值，图像将是它们的自然大小。
Make body{font-size: 125%};and everything - including images - wil be double original size.
制作body{font-size: 125%};和所有东西 - 包括图像 - 将是原始尺寸的两倍。
回答by Cedric Austen-Brown
With this code 1em or 100% will equal to 1% of the body height
使用此代码 1em 或 100% 将等于身体高度的 1%
document.body.style.fontSize = ((window.innerHeight/100)*6.25)+"%"
回答by Rushabh Sooni
* {
transform: scale(1.1, 1.1)
}
this will transform every element on the page
这将转换页面上的每个元素
回答by Andy Ford
Jon Tan has done this with his site - http://jontangerine.com/Everything including images has been declared in ems. Everything. This is how the desired effect is achieved. Text zoom and screen zoom yield almost the exact same result.
Jon Tan 已经在他的网站 - http://jontangerine.com/上做到了这一点。 包括图像在内的所有内容都已在 em 中声明。一切。这样就达到了想要的效果。文本缩放和屏幕缩放产生几乎完全相同的结果。
回答by T0xicCode
CSS will not be able to zoom on demand, but if you couple CSS with JS, you could change some values to make a page look bigger. However, as it has been said, this feature is standard nowadays in modern browsers: no need to replicate it. As a matter of fact, replicating it will slow down your website (more things to load, more JS or CSS to parse or execute and apply, etc.)
CSS 将无法按需缩放，但是如果您将 CSS 与 JS 结合使用，您可以更改一些值以使页面看起来更大。然而，正如人们所说，这个功能在现代浏览器中是标准的：不需要复制它。事实上，复制它会减慢你的网站的速度（加载更多的东西，更多的 JS 或 CSS 来解析或执行和应用，等等）
回答by Ags1
I have the following code that scales the entire page through CSS properties. The important thing is to set body.style.width to the inverse of the zoom to avoid horizontal scrolling. You must also set transform-origin to top left to keep the top left of the document at the top left of the window.
我有以下代码通过 CSS 属性缩放整个页面。重要的是将 body.style.width 设置为缩放的倒数以避免水平滚动。您还必须将 transform-origin 设置为左上角以将文档的左上角保持在窗口的左上角。
var zoom = 1;
var width = 100;
function bigger() {
zoom = zoom + 0.1;
width = 100 / zoom;
document.body.style.transformOrigin = "left top";
document.body.style.transform = "scale(" + zoom + ")";
document.body.style.width = width + "%";
}
function smaller() {
zoom = zoom - 0.1;
width = 100 / zoom;
document.body.style.transformOrigin = "left top";
document.body.style.transform = "scale(" + zoom + ")";
document.body.style.width = width + "%";
}
