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

【问题标题】：How can I scale an entire web page with CSS?如何使用 CSS 缩放整个网页？
【发布时间】：2010-11-12 11:30:26
【问题描述】：

使用 Firefox，您只需按 CTRL + 即可放大整个网页。它的作用是按比例放大整个网页（字体、图像等）。

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

有没有类似page-size: 150% 的东西（这会使整个页面部分增加 x%？）

【问题讨论】：

Firefox 的页面缩放功能出现在每个现代浏览器中 - 复制它似乎毫无意义。
我同意大卫的观点。复制这个似乎毫无意义，因为现在的浏览器已经内置了这个功能......
这对于移动设备来说实际上是一个非常有用的功能。许多手机现在都在不适应差异的情况下提高 PPI（当然除了 iPhone4）。
它没有复制它。它可能对嵌入 div 中的页面/元素预览等有用。
页面设计者应该能够为他的页面设置默认缩放。我的页面在制作时很大，但由于高分辨率显示现在很小：lonniebest.com/CardTrick 我不想重新制作页面，而是默认缩放。

【解决方案1】：

如果您的 CSS 完全围绕 ex 或 em 单位构建，那么这可能是可行的。您只需要以您的风格为body 或html 声明font-size: 150%。这应该导致每隔一个长度按比例缩放。但是，您不能以这种方式缩放图像，除非它们也有样式。

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

【讨论】：

那只会改变我的字体大小。 CTRL+ 还提议加宽固定的宽度、高度和图像尺寸。
我知道，但它与纯 CSS 一样接近。此外，不仅您的字体会发生变化，而且尺寸被指定为字体大小倍数的所有内容都会发生变化。意思是，您使用 %、em 或 ex 单位的所有内容。
那是不正确的。我已经测试了下面列出的解决方案（zoom + -moz-transform 属性），它适用于 FF3.5、IE6+、Safari 和 Opera。它可以缩放图像和文本。您可以在 CSS 中缩放页面。

【解决方案2】：

您也许可以使用 CSS zoom 属性 - 在 IE 5.5+、Opera、Safari 4 和 Chrome 中受支持

Can I use: css Zoom

Firefox 是唯一不支持 Zoom (bugzilla item here) 的主流浏览器，但您可以使用 "proprietary" -moz-transform property in Firefox 3.5。

所以你可以使用：

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

【讨论】：

专有缩放属性仅受 IE 支持。 reference.sitepoint.com/css/zoom#compatibilitysection
David，该参考资料已经过时了 - 查看它列出的浏览器版本。目前所有主流浏览器都支持 CSS Zoom，除了 Firefox。而且它并不比任何 -moz- CSS 扩展更具专有性。
注意：我认为已经提出的其他解决方案 - 例如基于 em 和 % 的缩放 - 更“纯粹”，但在大多数 Web 布局上不一定实用，除非你已经构建了这种方式从头开始。
我已经测试过 Opera 10b2，它似乎不支持它。 Firefox nightly 行为异常（缩放片段消失）。 IE5/6 有问题。仅在 WebKit 中运行良好。
感谢乔恩，很棒的信息！在 firefox -moz-transform scale 确实有效，但根据您的用例，您可能需要使用 -moz-transform-origin 更正元素的位置（cfr.developer.mozilla.org/En/CSS/-moz-transform-origin）

【解决方案3】：

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

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

如果您定义body{font-size: 62.5%};，则 1em 将相当于 10px。据我所知，这适用于所有主要浏览器。

然后您可以使用width: 10em; height: 10em; 指定（例如）100px 方形图像，并假设 Firefox 的缩放设置为默认值，图像将是它们的自然大小。

使body{font-size: 125%}; 和所有内容（包括图像）都变成原始大小的两倍。

【讨论】：

我不明白，如果我说 body{font-size: 62.5%; font-size: 125%} - 那如何定义 1em 为 10px。浏览器是否可以简单地忽略第一个字体大小声明，然后简单地设置 125% = 10px？
我想你误会了。你不会同时做这两件事。 62.5 x2 = 125... 展示如何通过调整值来缩放。
是的。我应该说'那么如果你使用 Javascript 来设置 body {font-size: 125%} 所有页面元素的大小都会加倍'。

【解决方案4】：

Jon Tan 在他的网站上做到了这一点 - http://jontangerine.com/ 包括图像在内的所有内容都已在 ems 中声明。一切。这样就达到了想要的效果。文本缩放和屏幕缩放产生几乎完全相同的结果。

【讨论】：

【解决方案5】：

CSS 将无法按需缩放，但如果将 CSS 与 JS 结合使用，则可以更改一些值以使页面看起来更大。然而，正如人们所说，这个特性在现代浏览器中是标准的：不需要复制它。事实上，复制它会减慢你的网站速度（加载更多的东西，需要更多的 JS 或 CSS 来解析或执行和应用等）

【讨论】：

这是一个标准的浏览器功能，但是直接将这个功能添加到站点意味着您不必依赖 (1) 用户对他们选择的浏览器的专业知识和 (2) 特定于浏览器的说明

【解决方案6】：

使用此代码 1em 或 100% 将等于身体高度的 1%

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

【讨论】：

【解决方案7】：

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

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

将页面缩放 110%。虽然有zoom 样式，但遗憾的是Firefox 仍然不支持它。

此外，这与您的缩放略有不同。 css transform 的作用类似于图像缩放，因此它会放大您的页面但不会导致回流等。

编辑更新了变换原点。

【讨论】：

谢谢你，但声明之间需要一些分号。此外，当我尝试这样做时，页面向左移动，超过了左边距，因此页面的左侧部分不再可见。添加各种相应的“...transform-origin: 0 0”声明解决了这个问题。
是的，我应该提到内容是用transform 剪辑的。感谢您的评论。
我同意@Dave Burton：使用transform-origin: 0 0; 可以满足我的要求。例如，要将页面缩放到 150%：transform: scale(1.5); transform-origin: 0 0;。我相信应该更正 @kumar_harsh 原本不错的答案。
我正在尝试将此添加到我网站的首页。它确实改变了页面的大小，但它也使一切都起源于屏幕的左侧。有没有办法使用这种缩放，它只是从一个中心点缩放所有东西？
Nvm，我所要做的就是去掉 transform-origin 行

【解决方案8】：

 * {
transform: scale(1.1, 1.1)
}

这将改变页面上的每个元素

【讨论】：

【解决方案9】：

我有以下代码通过 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 + "%";
        }

【讨论】：

这样做要小心。您将牺牲使用位置的能力：固定

【解决方案10】：

跨浏览器兼容性：

示例如下：

<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 */
    }

【讨论】：

【解决方案11】：

规模不是最佳选择

它需要一些其他的调整，比如边距填充等..

但正确的选择是

zoom: 75%

【讨论】：

...不适用于完全不支持它的 Firefox。
这个怎么样？ developer.mozilla.org/en-US/docs/Web/CSS/scale
这个怎么样？ ;) developer.mozilla.org/en-US/docs/Web/CSS/@viewport/zoom 我的意思是缩放不是很正确的选择，因为 Firefox 不支持它，所以你需要同时使用这两个描述符，而不是考虑其中一个更好。
那么您有什么推荐的替代方案？
不要搜索替代项，使用这两个描述符。

【解决方案12】：

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

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

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

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

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

【讨论】：