Matthew Roach
🍔 🍟

Mobile device detection in Google Chrome

This article is to talk about how I used Google Chrome to help with the development of serving different content for different devices.

chrome_setting_overrides

One thing to note is that, we did have a range of different devices to do actual testing on, but I found it much quicker to iterate basic things using the desktop and then fire up the device(s) to test for real. What I am about to explain is great for quick testing that what you are writing is performing as intended. I suggest you always check on a real device.

In Google Chrome you can override the user agent that the web browser is sending to the web server, and if you are doing user agent detection like we are the server would take this override and what ever you are doing on the server for mobile detection would return as if you where asking for it from your mobile or tablet, you can even set the user agent to other browser venders (such as IE). Bear in mind that this user agent override does not make Chrome act like the browser you are overriding to, it just mimics its user agent string, so if you are doing server side or client side checking of the user agent string this is pretty perfect for quick development.

The user agent is changed for the server side as well as the client side, so any code you have written that is using the User Agent string in the server request or the navigator.userAgent string in JavaScript will be changed based on this override.

Google Chrome Overrides

  1. Open the Chrome Developer tools (I assume you know how to do this, if not see here)
  2. Click the gear icon in the bottom right corner, this will give you the settings overlay
  3. Click overrides in the left menu, and you will see something similar to the screenshot above
  4. Start changing the user agent from the dropdown and do your testing.
  5. You need to refresh your page each time you change the user agent

You can play around with the JS Bin I used for the screenshot above if you so wish :http://jsbin.com/ivivez

Dev Tip: I had multiple tabs open with the user agent set to different devices, and I also used a little bit of JavaScript to put the device (eg. iPhone) at the the start of the title, so I could easy see which tab was which.

As you will see, you can do more than I am going to explain in this article, and I suggest you go reading up on it. But for this article I am only using User Agent and Device Metrics.