Question

我正在尝试在打印过程中使用方向媒体查询来更改我的数据显示方式。此功能适用于FF和Edge，但不适用于Chrome。如果我在开发工具中启用仿真并选择“打印”，那么我的代码将起作用。如果我尝试通过打印预览窗口或输出，都不会根据方向进行更改。

我尝试在html以及外部查找样式。

这是我的print.css文件：

@media (orientation: portrait) {
   pre {
     font-size: 5px;
   }
}
@media (orientation: landscape) {
   pre {
     font-size: 20px;
   }
}

这是我的源文件：

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <link rel="stylesheet" href="print.css" media="print" type="text/css">
   </head>

   <body>
      <pre>1234567890</pre>
   </body>
</html>

我希望它在打印时选择横向布局时以20px字体显示<pre>文本，在选择肖像时以5px字体显示<center>文本。当查看打印预览或实际打印（例如转换为PDF）时，这就是它在FF和Edge中的工作方式。

媒体打印方向查询在Chrome中不起作用

0 个答案: