0

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>
user13286
  • 3,027
  • 9
  • 45
  • 100

3 Answers3

0
only screen

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

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
  • I tried removing the `only screen and` part, but it's still displaying the mobile version when I print. – user13286 Sep 28 '17 at 15:02
0

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

@media print {
  .visible-desktop {
    display:block;
  }
  .visible-mobile {
    display:none;
  }
}
Johannes
  • 64,305
  • 18
  • 73
  • 130
  • I would rather not take this approach as my actual implementation includes a lot more content than the sample. – user13286 Sep 28 '17 at 15:02
  • Well,, then try to use `@media screen and (min-width:768px) {..` (without `screen`) to avoid the limitation of that rule to screens. – Johannes Sep 28 '17 at 15:07
  • I tried that per @SLaks suggestion, but the browser continues to print the mobile version, even without `screen`. – user13286 Sep 28 '17 at 15:11
  • Yeah, just not going to work for me. Some elements are table cells, other elements are block and others are inline-block, so I can't just do a `display:block;` on hidden mobile elements and call it a day. There's gotta be some way to force the print functionality to use a specific, non-print, media query. – user13286 Sep 28 '17 at 15:14
  • couldn't you simply copy everything that's in the media query into an `@media print` query? – Johannes Sep 28 '17 at 15:18
0

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.

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964