0

I'm building a site that has an "Export" button, which rearranges the page slightly then launches the Print dialog. It allows users on desktop to print or save the page as PDF.

However, we also have mobile users. On mobile, the button makes no sense: mobile browsers don't (as far as I know) even have print capability.

How can I hide the button using a media query (or similar) on mobile devices? The safest bet seems to be to detect the operating system, and hide it if Android, iOS or similar?

Steve Bennett
  • 114,604
  • 39
  • 168
  • 219
  • You can check via User Agent, https://stackoverflow.com/questions/25393865/how-do-you-detect-between-a-desktop-and-mobile-chrome-user-agent – Ibra Mar 18 '19 at 04:54

1 Answers1

1

Just use this media query button will be hidden after 767px You can also change view port as per your requirement

@media screen and (max-width:767px){
#print-my-data{
display:none;
}
}
<button id="print-my-data">Print</button>
Vikas Patel
  • 207
  • 1
  • 10
  • Thanks for trying to help, but I don't think that's the right approach. If for some reason the user has the browser window very small on desktop, the export button should still be present. – Steve Bennett Mar 18 '19 at 05:00