Chrome 忽略纵向上的 CSS 打印设置答案

【问题标题】：Chrome ignores CSS print settings on portraitChrome 忽略纵向上的 CSS 打印设置
【发布时间】：2017-12-19 23:24:27
【问题描述】：

我正在尝试根据纵向或横向来控制 HTML 元素的打印布局。这是我在 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 位。

【问题讨论】：

标签： html css google-chrome

【解决方案1】：

根据我的测试方向：横向适用于 IE 和 FF，但不适用于 Chrome。但是 Chrome 可以使用 min-width:600px。我在下面组合它们的方式适用于所有三种浏览器。

@media print {
    all
    @media (orientation:landscape) and (min-width:600px) {
        landscape
    }
}
@media screen {
    all
    @media (min-width:1006px) {
        landscape
    }
}

【讨论】：

您能否详细介绍一下您的调整？

【解决方案2】：

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

@page {
  size: letter portrait;
}

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

【讨论】：

感谢您的回复。此设置似乎对 IE 和 Firefox 没有影响。在 Chrome 上，它将打印限制为仅纵向模式。这不是我真正想要的。
您可以将其更改为横向或a4或其他纸张尺寸。你试过吗？