如何使用 CSS 缩放整个网页？

使用 Firefox，只需按 CTRL +即可放大整个网页。这样做是按比例放大整个网页(字体，图片等)。

如何使用简单的 CSS 复制相同的功能？

是否有类似于 page-size: 150%(它会将整个页面部分增加 x% ?)的东西

353710 次浏览
小开

如果您的 CSS 完全围绕 ex或 em单元构建，那么这可能是可能的和可行的。您只需要为 body或 html以您的样式声明 font-size: 150%。这将导致其他长度按比例缩放。但是，你不能这样缩放图像，除非它们也有自己的风格。

但无论如何，在大多数网站上，这是一个非常大的 如果。

小开

你可以在 IE 5.5 + 、 Opera、 Safari 4和 Chrome 中使用支持的 CSS zoom属性

我可以使用: css 缩放

Firefox 是唯一不支持 Zoom (这里有个疯狂的东西)的主流浏览器，但是你可以使用 Firefox 3.5中的“专有”-moz-change 属性。

所以你可以用:

div.zoomed {
zoom: 3;
-moz-transform: scale(3);
-moz-transform-origin: 0 0;
}
小开

正如约翰内斯所说——没有足够的代表直接评论他的答案——你确实可以这样做，只要所有元素的“尺寸都指定为字体大小的倍数。意思是，所有您使用% 、 em 或 ex 单位的内容”。虽然我认为% 是基于包含元素，而不是字体大小。

你通常不会用这些相对单位来表示图像，因为它们是由像素组成的，但是有一个技巧可以让它更加实用。

如果定义 body{font-size: 62.5%};，那么1em 等于10px。据我所知，这在所有主要浏览器上都可以工作。

然后你可以用 width: 10em; height: 10em;指定你的(例如)100px 的正方形图片，假设 Firefox 的缩放设置为默认，图片将是它们的自然大小。

使 body{font-size: 125%};和一切-包括图像-将是双原始大小。

小开

Jon Tan 在他的网站上做到了这一点—— http://jontangerine.com/ 包括图像在内的所有东西都已在医疗急救中心声明。一切。这就是达到预期效果的方法。文本缩放和屏幕缩放的结果几乎完全相同。

小开

CSS 不能根据需要放大，但是如果你将 CSS 与 JS 结合起来，你可以改变一些值使页面看起来更大。 然而，如前所述，这个特性在现代浏览器中是标准的: 不需要复制它。事实上，复制它会降低你的网站速度(要加载更多的东西，要解析、执行和应用更多的 JS 或 CSS，等等)

小开

使用这个代码1em 或100% 将等于身高的1% 

document.body.style.fontSize = ((window.innerHeight/100)*6.25)+"%"
小开

这是一个相当晚的答案，但你可以使用

body {
transform: scale(1.1);
transform-origin: 0 0;
// add prefixed versions too.
}

将页面缩放110% 。 尽管有 zoom风格，Firefox 仍然不支持它。

而且，这和你的变焦略有不同。css transform的工作原理类似于图像缩放，所以它会放大你的页面，但不会引起回流等等。

编辑 更新转换原点。

小开 
 * {
transform: scale(1.1, 1.1)
}

这将转换页面上的每个元素

小开

我有以下代码，可以通过 CSS 属性缩放整个页面。重要的是将 body. style.width 设置为缩放的反向，以避免水平滚动。您还必须将转换原点设置为左上角，以使文档的左上角保持在窗口的左上角。

        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 + "%";
}
小开

跨浏览器兼容性:

下面的例子:

<html><body class="entire-webpage"></body></html>






.entire-webpage{
zoom: 2;
-moz-transform: scale(2);/* Firefox Property */
-moz-transform-origin: 0 0;
-o-transform: scale(2);/* Opera Property */
-o-transform-origin: 0 0;
-webkit-transform: scale(2);/* Safari Property */
-webkit-transform-origin: 0 0;
transform: scale(2); /* Standard Property */
transform-origin: 0 0;  /* Standard Property */
}
小开

规模不是最好的选择

它将需要一些其他的调整，如边缘填充等. 。

但正确的选择是

zoom: 75%
小开

您必须设置缩放属性的样式。 现在有趣的部分是如何计算它。 我就是这么做的。

let zoom = Number((window.innerWidth / window.screen.width).toFixed(3));
document.firstElementChild.style.zoom = zoom;

这将计算当前窗口宽度与实际设备宽度的比率。 然后将该值设置为顶级 html 元素缩放属性。 可以使用 document.firstElementChild访问顶级 html 元素

可以将此代码放入 window.onresize函数中，使整个页面相应地缩放。

将主包装 div 的高度设置为100% ，以防止缩放时出现空白。


提交答案