Question

我正在尝试为我的页面添加一些打印功能，但我遇到的问题是，当我打印时，它打印就像是移动一样。我怎样才能做到这一点，当有人点击打印它打印桌面版本？

＆＃13;

$('.print-btn').click(function(e) {
  window.print();
});

＆＃13;

.visible-desktop {
  display:none;
}

@media only screen and (min-width:768px) {
  .visible-desktop {
    display:block;
  }
  
  .visible-mobile {
    display:none;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="visible-desktop">Viewing from desktop</div>
  <div class="visible-mobile">Viewing from mobile</div>
</div>

<a class="print-btn" href="#">Pring</a>

＆＃13;

Answer 1

only screen

这不包括印刷品。如果要包含打印，请不要写入。

Answer 2

您可以在样式表的底部添加@media print规则：

@media print {
  .visible-desktop {
    display:block;
  }
  .visible-mobile {
    display:none;
  }
}

Answer 3

您应该选择一个状态（可能是桌面）并将其设置为“默认”，方法是将该状态移到媒体查询之外。

其他状态应覆盖媒体查询中的默认状态属性。

如何使打印使用桌面媒体查询？

3 个答案: