Turn off/hide print button just for mobile devices

Question

I have a print button on my map that I would like to hide if the user is accessing the map from a mobile device.  I have a media query set up

@media (max-width:767px) {

#btnPrint {

visibility:hidden

}

but the problem is the wide range of resolutions available on mobile devices.  I could easily have a user hitting the site with a desktop, where I do want them to have a print button.  It seems like a media query isn't going to cover all the bases.  It seems to be OK for a typical phone, but not for something like a tablet.

Is there another (or better) way to handle this?

thejuskambi · Answer

in dojo, you could use has('touch') to detect touch capability

JansenLyons_0-1637334016065.jpeg

RobertScheitlin__GISP · Answer

Tracy,

Media queries will work but like you point out there are issue with that approach. The Approach I like to use is feature detection for touch.

Most touch devices do not have print capability but as with most routes this can exclude some devices that have some printing ability. So there are pros and cons.

Here is a good link for touch feature detection:

jquery - What's the best way to detect a 'touch screen' device using JavaScript? - Stack Overflow

This is the latest Modernixr test for touch:

var bool;
    if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
      bool = true;
    } else {
      var query = ['@media (', prefixes.join('touch-enabled),('), 'heartz', ')', '{#modernizr{top:9px;position:absolute}}'].join('');
      testStyles(query, function(node) {
        bool = node.offsetTop === 9;
      });
    }

Most of all do not let anyone convince you to use any sort of user agent detection. User agent detection is NOT the way to go.

JoelSmith3_1-1637332985622.png

Screenshot.png

Screenshot1.png

スクリーンショット (12).png

JeffBigos.jpg