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.
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.
Google Chrome Overrides
- Open the Chrome Developer tools (I assume you know how to do this, if not see here)
- Click the gear icon in the bottom right corner, this will give you the settings overlay
- Click overrides in the left menu, and you will see something similar to the screenshot above
- Start changing the user agent from the dropdown and do your testing.
- 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
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.