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>

回答1:

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

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

回答2:

only screen

This excludes print. If you want to include print, don't write that.

回答3:

You should pick one state (probably desktop) and make it the "default", by moving that state outside media queries.

The other states should override the default state's properties in media queries.

来源：https://stackoverflow.com/questions/46472259/how-to-make-print-use-desktop-media-queries