Question

使用Firefox，只需按 CTRL + 即可放大整个网页。这样做会按比例放大整个网页（字体，图像等）。

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

是否有类似page-size: 150%的内容（这会使整个页面部分增加x％？）

Answer 1

您可以使用CSS zoom属性 - IE 5.5 +，Opera和Safari 4以及Chrome

支持

Can I use: css Zoom

Firefox是唯一不支持缩放的主要浏览器（bugzilla item here），但您可以使用"proprietary" -moz-transform property in Firefox 3.5。

所以你可以使用：

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

Answer 2

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

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

将页面缩放110％。尽管存在zoom样式，但Firefox仍然不能支持它。

此外，这与缩放略有不同。 css transform的工作方式类似于图像缩放，因此它会放大页面但不会导致重排等。

修改更新了转换源。

Answer 3

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

但是，无论如何，这对于大多数网站来说都是。

Answer 4

正如约翰内斯所说 - 没有足够的代表直接评论他的回答 - 只要所有元素的“维度被指定为字体大小的倍数，你就可以这样做。意思是，你用过的所有东西％， em或ex单位“。虽然我认为％是基于包含元素，而不是font-size。

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

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

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

制作body{font-size: 125%};，包括图片在内的所有内容都将是双原始大小。

Answer 5

使用此代码，1em或100％将等于身高的1％

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

Answer 6

对于跨浏览器兼容性：

示例如下：

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

Answer 7

Jon Tan用他的网站完成了这项工作 - http://jontangerine.com/ 包括图像在内的所有内容都已在ems中声明。一切。这就是达到预期效果的方式。文本缩放和屏幕缩放产生几乎完全相同的结果。

Answer 8

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

Answer 9

缩放不是最佳选择

这将需要其他一些调整，例如边距填充等。

但正确的选项是

zoom: 75%

Answer 10

 * {
transform: scale(1.1, 1.1)
}

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

Answer 11

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

Answer 12

我认为用CSS完全不可能做到这一点 - 你可能需要用Javascript来弄清楚你的工作，以确保工作正确完成。

如何使用CSS扩展整个网页？

12 个答案: