41

I want to use Modernizr to detect whether a user is view a site on a desktop, tablet or mobile device.

My initial first thoughts are obviously to check screen sizes that should be enough for mobile devices and also for larger desktops. For tablet devices where the screen size could also equal that of a small desktop screen (1024 x 768) I would test for touch events as well.

At this time I would like to focus on mobile/tablet devices that, as jQuery mobile puts it are, A-grade. I am not looking to tap in to any specific mobile device features simply detect desktop, tablet or mobile and serve up a tailored UI for each by appending CSS classes depending on the results of the test.

Do you think this is enough to achieve what I want or do you think I should be testing for other capabilities? Many thanks in advance.

Ilmari Karonen
  • 44,762
  • 9
  • 83
  • 142
mtwallet
  • 4,780
  • 13
  • 47
  • 71

4 Answers4

46

This question is a bit old but I couldn't find a better answer when I googled it.

Most desktops now are touch enabled, so detecting it is irrelevent.

The best way to detect them is by screen size.

With Modernizr you can use if (Modernizr.mq('only all and (max-width: 480px)')) { ...}

Carlos Martinez T
  • 6,298
  • 1
  • 31
  • 39
  • 4
    Retina displays make this tricky though because it theoretically has similar resolutions as some desktops – Jacques Jul 24 '13 at 14:04
  • 5
    yeah the real issue is no longer screen resolution ... but rather __real world__ dimension that matters ... is the device 4 inches or 19 inches ... – dsdsdsdsd Jul 24 '13 at 20:32
  • I like that. There should be a media query for centimeters. 1 cm is approximately the area of a fingertip – Carlos Martinez T Jul 25 '13 at 10:11
  • 2
    I think he means browsers running on desktop machines are touch-enabled, as opposed to the desktop hardware itself. – melat0nin Feb 05 '14 at 15:37
  • 12
    No, I meant the hardware itself. I live in London. Almost every laptop has now touch screens. The same for most All in one PCs. – Carlos Martinez T Feb 10 '14 at 15:37
  • 2
    Whether or not desktop touch is "normal" it's still a thing, so touch != mobile. You should use both touch and size together. – doublejosh Jan 21 '15 at 00:15
  • Use ems instead of pixels! Until there is such a thing as media queries for centimeters/inches... – mizuki Apr 08 '15 at 08:34
  • 2
    @Carlos Martinez so my MacBook Pro is not touch enabled and most people use Mac's here so I don't know where have you seen that most are touch enabled. BTW I also live in London – Ales Maticic Jun 07 '16 at 16:05
  • Five years later and this statement still isn't close to being true – Chuck Le Butt Jan 26 '18 at 12:19
42

Modernizr can check for touch events

For testing whether the device is a tablet or phone or desktop, I would probably lean more toward using User Agents. Take a look at the scripts on DetectMobileBrowsers.com

Modernizr simply tests for whether or not a browser supports certain features. As far as I know, it doesn't appear to test browser_type == mobile and stuff along those lines...

Keep in mind that a lot of modern desktop PCs these days have touch screens, so even detecting touch support does not guarantee that it is a mobile device or tablet.

Jake Wilson
  • 78,902
  • 83
  • 230
  • 344
  • 8
    [DetectMobileBrowsers][1] usage with [jQuery][2] `if($.browser.mobile){// your code}` --- With modernizr `if ( Modernizr.touch ) { // your code}` [modernizr touch documentation](http://modernizr.com/docs/#touch) – mica Jan 17 '14 at 17:49
  • 5
    However, it labels Windows 8 a 'touch' too. So if you are trying to hide animations or limit bandwidth its sends a false positive in this situation. – Mark Mar 19 '14 at 20:16
  • 1
    Also some issues on firefox where Modernizr.touch returns true – william Jun 04 '14 at 21:51
  • 3
    **Modernizr does not tell you anything about the device... only the browser.** There are devices with touchscreens running browsers which don't support Touch Events; there are devices without touchscreens running browsers which do support Touch Events. -> https://github.com/Modernizr/Modernizr/issues/651#issuecomment-13939129 – TeNNoX Jan 11 '16 at 17:04
  • How has nobody combined these into a single solution? – Anthony Aug 24 '20 at 03:10
5

You can use the following extension for Modernizr: https://www.npmjs.org/package/mobile-detect

Or (without Modernizr) you could use Restive.JS to add a ".phone" or ".tablet"-class to your body: http://docs.restivejs.com

(Look for "formfactor" down the page.)

tFranz
  • 63
  • 1
  • 7
-1

This is a follow up answer to an old question as I believe the "correct" answer has changed with time.

  • Many laptops are touch enabled today
  • Newer mobiles have higher resolutions than the bulk of computer monitors out there while still having a significantly smaller physical screen

The best way I have found to work around this is calculate the physical screen size by multiplying the DPI of the screen in combination with the screen size in pixels.

Oskar Sjöberg
  • 2,260
  • 21
  • 27
  • On many devices (mobile) hardware pixel != software pixel. That's why even though a phone can have hardware display resolution of 1080 x 2340 px, but it will be treated as 393 x 665 px by mobile browser, which would result in bigger elements and more detailed fonts. – Kamil Bęben Aug 09 '20 at 00:23