如何使用桌面媒体查询进行打印？ [英] How to make print use desktop media queries?

问题描述

我试图在页面上添加一些打印功能，但是我遇到一个问题，即我在打印时好像在移动时一样在打印。我该怎么做，以便当有人点击打印时打印桌面版本？

I am attempting to add some print functionality to my page, but I am having an issue where when I print, it is printing as if it is mobile. How can I make it so that when someone hits print it prints the desktop version?

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

.visible-desktop {
  display:none;
}

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

<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>

推荐答案

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

You can add an @media print rule at the bottom of your stylesheet:

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

这篇关于如何使用桌面媒体查询进行打印？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！