Question

我正在尝试根据portait或landscape控制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位。

Answer 1

从我的测试方向：横向适用于IE和FF，但不适用于Chrome。但Chrome适用于最小宽度：600px。我将它们组合在一起的方式适用于所有三种浏览器。

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

Answer 2

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

@page {
  size: letter portrait;
}

请参阅https://www.w3.org/TR/css3-page/和https://www.w3.org/TR/css-gcpm-3/

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

2 个答案: