时间戳

首页 > 解决方案 > 媒体打印方向查询在 Chrome 中不起作用

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

问题描述

我正在尝试在打印期间使用方向媒体查询来更改数据的显示方式。这适用于 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>

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

标签： cssmedia

解决方案

推荐阅读