在 Chrome 中模拟缩放的 Css答案

【问题标题】：Css to emulate scaling in Chrome在 Chrome 中模拟缩放的 Css
【发布时间】：2018-12-26 00:45:55
【问题描述】：

我想在 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 中没有办法。

【问题讨论】：

【解决方案1】：

您无法提供放大@page。但是，您可以将zoom 设置为@media print 内的父容器。你可以这样做

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

这里container 类应用于父级，因此当您打印它时，整个屏幕将缩放到50%。

根据文档 @page 仅支持 size, marks and bleed。更多详情请点击此处https://developer.mozilla.org/en-US/docs/Web/CSS/@page。

有关使用 print css 的更多详细信息，您可以阅读 Racheal Andrew 的精美博客。 https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/

以下是截图：

Chrome 缩放：

带缩放的媒体打印：50%

【讨论】：

不起作用。当您将控件按原样缩小时，与 chrome 中的 scale 属性所做的不同。
@ove 我更新了答案以使用 scale 而不是缩放。您可以查看 codepen 示例。我认为它应该对你有所帮助。
你检查过codepen吗？你能添加你的示例代码/页面结构吗？
是的，我更改了您笔中的刻度值，但 Chrome 上没有任何反应
@ove 你能用zoom: 50% 代替transform: scale(0.5) 并删除transform-origin。我对原始答案进行了更改。还修改了笔。它对我来说非常有效。你可以试试看。

【解决方案2】：

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

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

}

【讨论】：

【解决方案3】：

终于找到答案了。

这是因为引导 css。

我实施了下面的修复，它现在似乎可以工作。

【讨论】：