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

Question

我正在尝试根据portait或横向来控制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

从我的测试方向来看：landscape适用于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/