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

Question

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

$('.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>

Answer 1

您可以在样式表底部添加一个 @media print 规则:

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