Chrome浏览器打印时错误应用媒体查询中的移动端类求助

这个问题我之前帮客户排查过好几次，Chrome的打印预览确实有个坑——它默认的预览视口宽度经常会触发移动端的媒体查询，尤其是当你用了不带screen限定的max-width规则时。下面给你几个递进的解决方案，从根本修复到兜底覆盖都有：

1. 给移动端媒体查询添加screen限定（最根本的修复） #

很多人写移动端媒体查询时会忽略screen媒体类型，导致print媒体也会匹配max-width的条件（因为Chrome打印预览的视口宽度通常较窄）。只要给移动端查询加上screen限定，就能彻底阻止打印时触发移动端样式：

/* 原来的错误写法（会被打印触发） */
/* @media (max-width: 768px) { ... } */

/* 修复后的写法：仅在屏幕设备的移动端生效 */
@media screen and (max-width: 768px) {
  .mobile-nav { display: flex; }
  .desktop-nav { display: none; }
  /* 其他移动端样式 */
}

2. 在打印专属样式中强制覆盖移动端类 #

如果没法修改原有的移动端媒体查询（比如用了第三方框架），可以在你的打印样式里明确重置移动端类的样式，强制使用桌面布局：

@media print {
  /* 隐藏移动端专属元素 */
  .mobile-only, .mobile-nav {
    display: none !important;
  }
  /* 显示桌面端元素 */
  .desktop-only, .desktop-nav {
    display: block !important;
  }
  /* 重置布局宽度，避免窄版显示 */
  .container, .page-wrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
  /* 移除移动端的弹性布局/网格布局，改用桌面版 */
  .mobile-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

3. 用JavaScript监听打印事件，临时切换布局 #

如果以上方法还不生效，可以通过监听浏览器的打印事件，临时给页面添加一个打印专属类，再针对这个类写样式：

// 监听打印开始事件
window.addEventListener('beforeprint', () => {
  document.body.classList.add('print-desktop-mode');
});

// 监听打印结束事件，移除类
window.addEventListener('afterprint', () => {
  document.body.classList.remove('print-desktop-mode');
});

然后在CSS中添加对应的样式：

.print-desktop-mode .mobile-only {
  display: none;
}
.print-desktop-mode .desktop-only {
  display: block;
}
/* 其他需要重置的移动端布局样式 */

额外小技巧：强制Chrome打印使用宽视口 #

有时候Chrome会强制用窄视口预览，你可以在打印样式里指定页面尺寸和body宽度，强制模拟桌面视口：

@media print {
  @page {
    size: A4 landscape; /* 或者auto，根据需求调整 */
    margin: 1cm;
  }
  body {
    width: 21cm; /* 对应A4横向宽度，模拟桌面宽屏 */
  }
}

内容的提问来源于stack exchange，提问作者naeohmi