使用Firefox浏览器，您可以通过按下CTRL +键来放大整个网页。这样做会比例放大整个网页（包括字体、图片等）。
如何只使用CSS复制相同的功能？
是否有类似于page-size: 150%的东西（它会将整个页面部分增加x%？）
如何使用CSS缩放整个网页？
198
- TimH
6
7Firefox的页面缩放功能在每个现代浏览器中都出现了 - 复制它似乎相当无意义。 - Quentin
1我同意David的观点。因为现在的浏览器都有这个功能，所以复制这个功能似乎有点毫无意义... - user
6对于移动设备来说，这个功能实际上会非常有用。许多手机现在增加了它们的像素密度，但并没有适应这种差异（当然，iPhone4除外）。 - DA.
46它并不是在复制它。它可能对于嵌入式 div 中的页面/元素预览很有用。 - RichieHH
3页面设计者应该能够为自己的页面设置默认缩放比例。我有一个在制作时很大，但现在因高分辨率显示器而变小的页面：http://www.lonniebest.com/CardTrick/ 。我不想重新制作这个页面，而是希望通过默认缩放来实现。 - Lonnie Best
不是完美的解决方案，但使用 em 作为您的度量单位。事物开始相对于它们的父级进行缩放（改变主体的大小，一切都会自动适应）。要获得更加“有趣”的结果……使用 cm 作为您的度量单位，尽管移动设备似乎会将其大小减半。 - Jefferey Cave
12个回答
212
您可能可以使用CSS的zoom属性 - 支持IE 5.5+、Opera、Safari 4和Chrome。
Firefox是唯一不支持缩放的主流浏览器(bugzilla item here)，但您可以在Firefox 3.5中使用"专有的"-moz-transform属性。
因此，您可以使用：
div.zoomed {
zoom: 3;
-moz-transform: scale(3);
-moz-transform-origin: 0 0;
}
- Jon Galloway
11
2专有的 zoom 属性仅受 IE 支持。http://reference.sitepoint.com/css/zoom#compatibilitysection - Quentin
17David，这个参考文献非常过时 - 看看它列出的浏览器版本。除 Firefox 外，所有当前主要的浏览器都支持 CSS 缩放。而且它并不比任何 -moz- CSS 扩展更具专有性。 - Jon Galloway
3注意：我认为其他提出的解决方案，比如使用em和百分比进行缩放，更“纯粹”，但在大多数网页布局中并不实用，除非你从头开始构建。 - Jon Galloway
2谢谢Jon，信息很有用！在Firefox中，-moz-transform scale确实有效，但根据您的用例，您可能需要使用-moz-transform-origin来校正元素的位置（参见https://developer.mozilla.org/En/CSS/-moz-transform-origin） - futtta
1嗯，看起来现在所有浏览器引擎都支持
transform:scale（有-webkit-、-moz-、-o-和-ms-前缀）。假设这些实际上可以工作（从快速测试中似乎是这样），那么使用zoom的唯一原因就是为了IE8及以下版本？ - Peter Boughton显示剩余6条评论
108
这是一个比较晚的答案，但是你可以使用
。body {
transform: scale(1.1);
transform-origin: 0 0;
// add prefixed versions too.
}
将页面缩放110%。
尽管存在zoom样式，但遗憾的是Firefox仍不支持。
此外，这与您的缩放略有不同。css transform类似于图像缩放，因此它会放大您的页面，但不会导致重新布局等问题。
编辑更新了变换起点。
- kumarharsh
10
1谢谢你的帮助，但是在声明之间需要加上一些分号。另外，当我尝试这个代码时，页面向左移动，超出了左边界，导致页面的左侧部分不再可见。添加相应的“...transform-origin: 0 0”声明可以解决这个问题。 - Dave Burton
1我同意 @Dave Burton 的观点：使用
transform-origin: 0 0; 可以达到我想要的效果。例如，将页面缩放至150%：transform: scale(1.5); transform-origin: 0 0;。我认为@kumar_harsh 的回答在其他方面是正确的，但需要纠正这一点。 - Kai Carver2我正在尝试将此添加到我的网站首页。它确实改变了页面的大小，但也使所有内容都从屏幕左侧开始。有没有一种方法可以使用这种缩放方式，使一切都从中心点缩放？ - theCrabNebula
1没事了，我只需要删除transform-origin这行代码就可以了。 - theCrabNebula
1我尝试在 Firefox 89.0.1 中运行此程序，它可以正常工作。现在支持似乎还不错。 - UnDiUdin
显示剩余5条评论
22
如果你的CSS完全使用了
不过，除非它们也得到了样式的设置，否则你不能以这种方式缩放图片。
ex或者em单位，那么这种方式可能是可行的。你只需要在body或html的样式中声明font-size: 150%，这应该会导致所有其他长度按比例缩放。但是在大多数网站上，这是一个很大的前提条件。不过，除非它们也得到了样式的设置，否则你不能以这种方式缩放图片。
- Joey
3
3那只会改变我的字体大小。而CTRL+也可以扩大固定宽度、高度和图像大小的比例。 - TimH
2我知道，但这是在纯CSS中最接近的方法了。不仅字体会改变，还会改变那些基于字体大小的尺寸单位（如%、em或ex）所指定的所有元素。 - Joey
1那不是正确的。我已经测试了我下面列出的解决方案（缩放+ -moz-transform属性），它在FF3.5、IE6+、Safari和Opera上都可以工作。它可以缩放图像和文本。你可以在CSS中缩放页面。 - Jon Galloway
10
规模并非最佳选择
它需要一些其他的调整，例如边距，填充等...
但正确的选择是
zoom: 75%
- SystemX
5
3对于不支持它的Firefox浏览器来说，它根本无法使用。 - ozzmosis
这个怎么样？
https://developer.mozilla.org/zh-CN/docs/Web/CSS/scale - SystemX
1这个怎么样？;) https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/zoom
我的意思是，缩放选项不太正确，因为它不受Firefox支持，所以你需要使用这两个描述符，而不是考虑哪一个更好。 - ozzmosis
那么，您推荐什么替代方案呢？ - SystemX
不要寻找替代方案，使用这两个描述符。 - ozzmosis
8
我有以下代码可以通过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 + "%";
}
- Ags1
2
1小心操作。这样做会牺牲使用“position: fixed”的能力。 - Bangkokian
谢谢！这对我在Firefox上非常有帮助。我将所有东西缩小到0.7（使一切更小以适应更多内容），但是没有宽度调整，打印版本仍然被裁剪了。 - Matt Leonowicz
6
正如Johannes所说，只要所有元素的"尺寸都以字体大小的倍数为指定。意思是，你使用%、em或ex单位的所有元素。"虽然我认为%基于包含元素，而不是字体大小。
通常情况下，您不会使用这些相对单位来处理图像，因为它们由像素组成，但有一个技巧可以使这个过程更加实用。
如果您定义，那么1em将等同于10px。据我所知，这适用于所有主流浏览器。
然后，您可以使用来指定您的（例如）100px正方形图像，假设Firefox的缩放设置为默认值，则图像将保持其自然大小。
使用
通常情况下，您不会使用这些相对单位来处理图像，因为它们由像素组成，但有一个技巧可以使这个过程更加实用。
如果您定义，那么1em将等同于10px。据我所知，这适用于所有主流浏览器。
然后，您可以使用来指定您的（例如）100px正方形图像，假设Firefox的缩放设置为默认值，则图像将保持其自然大小。
使用
body{font-size：125％} ，一切-包括图像-将是原始尺寸的两倍。- e100
3
我不理解，如果我说 body{font-size: 62.5%; font-size: 125%} - 那么这将如何定义1em为10px。浏览器是否可以简单地忽略第一个 font-size 声明，然后将125％简单地设置为10px？ - TimH
我觉得你误解了。你不会同时进行这两个操作。62.5 x2 = 125…为了展示如何通过调整值来扩展事物的规模。 - Ape-inago
是的。我应该说“如果您使用JavaScript设置body {font-size：125％}，则所有页面元素都会增加一倍大小”。 - e100
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 */
}
- Saumyajit
3
使用这段代码，1em或100％将等于正文高度的1％。
document.body.style.fontSize = ((window.innerHeight/100)*6.25)+"%"
- Cedric Austen-Brown
2
你需要在样式中设置缩放属性。有趣的部分是如何计算它。这是我所做的。
let zoom = Number((window.innerWidth / window.screen.width).toFixed(3));
document.firstElementChild.style.zoom = zoom;
这将计算当前窗口宽度与实际设备宽度的比率。然后将该值设置为顶级html元素的缩放属性。 可以使用
document.firstElementChild访问顶级html元素。
您可以将此代码放在window.onresize函数中，以使整个页面相应地缩放。
将主包装器div的高度设置为100％，以防止缩放时出现白色空间。- Ronn Wilder
1
Jon Tan在他的网站上做到了这一点-http://jontangerine.com/。包括图像在内的所有内容都已经用em进行声明。这就是实现所需效果的方法。文本缩放和屏幕缩放几乎产生完全相同的结果。
- Andy Ford
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接