How to detect iPad Mini?

Question

I have a site that goes to mobile when the width is less than 1000. The problem is, when the iPad Mini is horizontal, its width is 1024 -- the same as an iPad. The iPad is capable of running a particular timeline that I have programmed, but the Mini is not -- it crashes. I want to detect when the user has a Mini and force the site to its mobile version in that case.

I looked at this stackoverflow entry: Detect iPad Mini in HTML5 but it doesn't actually have any code to detect the mini, though I enjoyed this suggested hack:

function isIPadMini( var timeToReachTerminalVelocity )
{
    return (timeToReachTerminalVelocity > IPAD_MINI_THRESHOLD);
}

Does anyone know how to detect the Mini please?

I'm just using this css code now:

@media (max-width: 1000px) {
  .desktop {
      display: none;
  }
  .mobile {
      display: block;
  }
}

Answer 1

This tends to work for me. It checks to see if the user has a cursor or not. You can also use pointer:none. To be fair though, this will get a phone as well. The only completely accurate way is with PHP or JavaScript.

@media (pointer: coarse) {
  .desktop {
      display: none;
  }
  .mobile {
      display: block;
  }
}