Wednesday, July 8, 2015

easy mobile browser detection

Based on stackoverflow's What is the best way to detect a mobile device in jQuery? and 3 ways to detect mobile device in jQuery this seems to be pretty effective:

function isMobile(){
    if(! window.matchMedia) return hasTouch();
    var test = window.matchMedia("only screen and (max-width: 1000px)");
    return test.matches && hasTouch();
}
function hasTouch() {
  try{
    document.createEvent("TouchEvent");
    return true;
  }
  catch(e){ return false; }
}

As you can see at the stackoverflow link, it's a contentious topic. In a perfect world, a responsive design would Just Work for everything... in the case of http://jpporchfest.org/ if I'm dealing with a very small screen I want to switch into a mobile-app like mode that dedicates the whole screen (save for a tab bar at top) to the map or band list. (The fact that the map is encouraging its own scrolling and zooming relative to the page means some of the ways and means of typical responsive design don't quite cut it.)

BONUS: I've been a long time user of Chrome's built-in dev tools, but didn't notice until it was pointed out to me last night that it has some pretty decent device emulation built-in; from the developer console (which admittedly I usually active with a humble right click / "Inspect Element") click the little device-looking icon. (Which I hadn't noticed before.)

No comments:

Post a Comment