CSS在Chrome中模拟缩放


Css to emulate scaling in Chrome

我想在Chrome中模拟一个打印设置(缩放)。

enter image description here

在IE11中，我已经添加了CSS，并且似乎可以解决该问题，但在Chrome中却没有。

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

在Chrome中，我必须手动将比例尺更改为50才能修复。 我在css中尝试过

1
2
zoom: 50%
transform: scale(0.5);

更新
现在我知道为什么它可以在IE11中使用了。 与设置A4大小无关。
看起来IE具有默认情况下处于启用状态的"缩小以适合"设置。
我认为CSS没有办法。

终于找到答案了。

这是因为引导css。

我实施了下面的修复程序，目前看来它可以正常工作。

https://github.com/twbs/bootstrap/issues/12078

相关讨论

这些是您尝试操作的用户设置，您无法更改比例。
试试看：

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

}

相关讨论

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

1
2
3
4
5
@media print: {
    .container: {
      zoom: 50%;
    }
}

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

根据文档@page仅支持size, marks and bleed。有关更多详细信息，请参见https://developer.mozilla.org/zh-CN/docs/Web/CSS/@page。

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

您可以在这里https://codepen.io/sandipnirmal/pen/ajWWgp上检查笔。

以下是屏幕截图：

Chrome缩放比例：

Chrome print view scaled to 50

缩放媒体打印：50％

Zoom level set to 50% for media query

相关讨论