Mobile and Tablet Detection

Do you see a "Your device might benefit from mobile" message above? If so, then your device has been detected as a tablet or phone that would benefit from a mobile interface. There are many ways people are detecting mobile and tablet devices. I used JavaScript to look at the userAgent initially, based on Detecting Mobile Devices with JavaScript by Cory LaViska. Yet, I found that some Windows tablets did not yield enough information that distinguished them from desktops. David Walsh resolved this as he describes in his article Device State Detection with CSS Media Queries and JavaScript. However, I found that the detection occurred on a large desktop if the window was sized down. I decided to take a two-factor approach.

First, I took David Walsh's idea and considered it. Yet, I wanted to know the device width, not the window width. I therefore resorted to using screen.width. Since I did not need to create a div object or read styles applied based on media queries as David Walsh did, I was able to be a lot simpler. I decided that 800 pixels was a good cut-off point for devices based on the stats for the site where I implented the code. I also considered portrait and landscape modes. Therefore, I used screen.height less than 800 pixels as well. So, one factor for detection is based on screen size. The other factor uses Corey LaViska's script to detect what the userAgent string yields. So, with some of my modifications, including consideration of the screen size, the final code considers either screen size or userAgent meeting the criteria for detection. Why 800 pixels? Greater than or equal to 800 pixels does not necessarily need a mobile interface. If the site is responsive and adaptive, it won't matter much anyway. While some tablets are 800 pixels wide or high or greater, don't worry. Due to the use of a two-factor approach, the userAgent will detect many of them.

Here is the code:

Now you have the power to detect for mobile devices and tablets.