CSS来模拟Chrome中的缩放比例

Question

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

Answer 1

最后找到了答案。

这是因为引导css。

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

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

Answer 2

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

var CustomerList = _context.Customers.Where(ps =>
    ps.Surname.Contains(surnameToSearchFor) 
    && ps.AddressIDs.Any(ad => ad.Postcode == postcodeToSearchFor ));

}

Answer 3

您无法提供@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。

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

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

以下是屏幕截图：

Chrome缩放比例：

可缩放的媒体打印：50％