Chrome浏览器忽略肖像上的CSS打印设置

问题描述：

我试图根据portait或风景来控制打印HTML元素的布局。以下是我在CSS设置中的内容。Chrome浏览器忽略肖像上的CSS打印设置

@media print and (orientation: landscape){ 
    /* Your code for portrait landscape */ 

    #reactView{ 
    /*chrome seems only look at this data*/ 
    height: 7in !important; 
    } 

@media print and (orientation: portrait){ 
    /* Your code for portrait landscape */ 

    #reactView{ 
    height: 10in !important; 
    } 
}

的设置在IE，Firefox的工作。但在Chrome浏览器中，纵向设置无效。在肖像上我也得到了7英寸。

这是Chrome上的错误吗？是否有解决方法？谢谢。

我在Chrome 60,64位。

答

您是否尝试过在您的css中设置页面大小？

@page { 
    size: letter portrait; 
}

见https://www.w3.org/TR/css3-page/和https://www.w3.org/TR/css-gcpm-3/

感谢您的回复。这个设置似乎对IE和Firefox没有影响。在Chrome上，它将打印限制为仅肖像模式。这不是我真正想要的。 – haijin

您可以将其更改为横向或a4或其他纸张尺寸。你有尝试过吗？ – WebGirl

答

我两个星期前登录票与Chrome，但从来没有听说过回。您可以强制Chrome浏览器以“A4风景”等其他纸张类型打印风景风格。默认的“美国信函”现在一直在打印人像样式，最重要的是现在打印样式大约为750像素。这意味着如果您将移动样式设置为767px或更少，您将看到这些样式应用于打印，而不是您打印时通常期望的桌面样式。所以看起来Chrome对他们的打印进行了一些更新，可能会在很多网站上破坏现在的破坏。我不想强制纸张大小，所以我进行了调整，因此页面仍然只能在肖像和767px css样式应用环境下正常打印。

你能否提供一些关于你的调整的细节？ – haijin

通过调整，我的意思是我需要期望移动样式以Chrome和桌面样式进行打印，以便在firefox/other中进行打印，并且只是为了确保它看起来不错。 Firefox等浏览器在打印横向和桌面样式时获得了最佳的打印输出。尽管在横向上它仍然印有纵向和移动样式，但Chrome浏览器仍然看起来不错。（每个浏览器都希望在打印视图中做他们自己的事情。） – user3353523

Chrome浏览器忽略肖像上的CSS打印设置

相关推荐