从 chrome 浏览器打印错误地应用来自媒体查询的移动类

Posted 2023-03-06

【中文标题】从 chrome 浏览器打印错误地应用来自媒体查询的移动类

【英文标题】：Printing from chrome browser incorrectly applying mobile classes from media queries

【发布时间】：2018-10-01 10:19:00

【问题描述】：

我遇到了媒体查询中包含的移动类在打印时在 chrome 浏览器中应用不正确的问题。

当在桌面点击ctrl+p打印（通过chrome浏览器）时->我的移动课程申请全屏，打印版本不正确.我想确保用户可以通过 chrome 浏览器从桌面打印，并且移动样式/类/布局不会被注入打印版本。

我在页面上有一个打印按钮和一个打印特定样式表。打印按钮没有问题，仅在浏览器打印时出现问题，并且仅在 chrome 中出现。奇怪的是，它在 Firefox 和 IE 中都能正常工作（看图！）。

我尝试在我的标题中包含一个额外的打印特定样式表，如下所示：

<link rel="stylesheet" href="/_css_/print.css" type="text/css" media="print" />

在这个 print.css 样式表（从 SCSS 编译）中，我尝试了各种不同版本的包装所有样式：@media print all 无济于事。

提前感谢您对这个麻烦的 chrome 打印的帮助！

【参考方案1】：

尝试将您的移动样式放入@media screen：

@media screen and (max-width: 800px)