How to detect a device type, based upon window width

These days, it seems like there are an almost infinite number of device types.  There are phones, tablets, phablets (AKA really big phone), small laptops (like netbooks), big laptops, and desktops.  The key to dealing with these devices is simply responsive design and extensive compatibility testing.  You should not deviate from that!

With that said, let us say that you want to target specific devices for device-specific behavior.  You could use a condition that is based upon user-agent strings but you would need to know all of the potential user-agent strings.  Even if you have the user-agent for Chrome on Android, what if they use the Dolphin Browser on Android?  Well, you can target based upon the screen width.


[gist id=5790954 file=index.html bump=2]


This is dependent upon the user having JavaScript turned on. Make sure you keep this in mind.

Leave a Reply

Your email address will not be published. Required fields are marked *