Css模拟Chrome中的缩放

在Chrome中有一个打印设置（比例），我想模仿它

在IE11中，我添加了css，这似乎可以修复它，但在Chrome中没有

@page {
  size: A4 portrait;
  margin: 1mm 1mm 0 5mm;
}

在Chrome中，我必须手动将刻度更改为50来修复它。我试过css

zoom: 50%
transform: scale(0.5);

更新 现在我知道为什么它在IE11中工作了。与设置A4大小无关。 看起来IE有一个默认打开的“收缩到适合”设置。

---

我认为在CSS中没有办法做到这一点。

您不能提供放大

@page

。但是，您可以将

缩放设置为
@media print
内的父容器。你可以这样做

@media print: {
    .container: {
      zoom: 50%;
    }
}

在这里，
container
类应用于父类，所以当您打印它时，整个屏幕将缩放到
50%

根据文档
@page
仅支持
大小、标记和放气
。更多详情请点击这里

有关使用打印css的更多详细信息，请阅读Racheal Andrew的Beauty博客

你可以在这里检查钢笔

以下是截图：

Chrome缩放：


带缩放的媒体打印：50%

这些是您试图操纵的用户设置，您无法更改比例。
试试这个：

@media print {
body {transform: scale(.5);}
table {page-break-inside: avoid;}

}终于找到了答案

这是因为引导css

我实现了下面的修复程序，现在似乎还有效

不起作用。当您缩放控件时，它会按原样缩小，这与chrome中的“缩放”属性所做的不同。@ove我更新了答案，使用
scale
而不是缩放。您可以查看codepen示例。我想应该对你有帮助。你检查过密码笔了吗？你能添加你的示例代码/页面结构吗？是的，我更改了你笔中的刻度值，但没有任何变化Chrome@ove您是否可以使用
zoom:50%
而不是
transform:scale（0.5）
并删除
transform origin
。我对原来的答案作了修改。还修改了钢笔。这对我来说非常有效。你可以试一试。试着做同样的事情，但是不要使用主体，而是使用HTMLB。但是我以为你想使用Chrome的缩放功能Chrome的缩放功能是一个解决办法，但我找到了解决方案。但是按照要求的方式，你似乎只想实现
缩放
。无论如何，是的，在我找到解决方案之前。这是一个解决办法。在css中使用缩放无法解决引导问题。它与chrome中的刻度设置有不同的行为。