front-end development

Dude, What’s My User Agent?

I’m just wrapping up a 45+ hour WordPress project, and I’m in testing and refining mode, and lo and behold, iPads and iPhone browsers don’t want to display like the other browsers.

When I test on the iOS browsers, I have text that’s partially hidden and has to be raised 70 pixels. The odd thing is that the Galaxy S4’s default browser has the same issue.

The problem with these changes are that the mobile devices don’t have a way to show you the source code; there’s no right click and view source, no F12 key, and no menu items available for help. Without the source code, I can’t read the user agent.

What’s a front-end developer to do?


When you are in the same situation, simply

  1. Go to What’s My User Agent, and you’ll get a huge string of information.
    1. For example, my Galaxy S4 Default browser showed me the following:
    2. Mozilla/5.0 (Linux; Android 4.3; en-us; SAMSUNG SGH-M919 Build/JSS15J) AppleWebKit/537.36 (KHTML, like Gecko) Version/1.5 Chrome/28.0.1500.94 Mobile Safari/537.3
  2. Choose a string that will be unique for the device you are trying to hack adjust,
    1. In my case, I targeted SGH-M919
  3. Target your selector by preceding the tag, class, etc. with the following data-useragent attribute selector like so:
html[data-useragent*='SGH-M919'] div.classIWantToChange { }


Be careful of the following:

  • When choosing a string from the user agent to target, be careful not to select something that might target other devices and browsers (for example, KHTML also appears on my Chrome browser on Windows, and I don’t need to adjust it.
  • Be sure to test on as many devices and browsers as you can (within some reason–are you getting paid for the testing? is the remuneration commensurate with the migraine inducing testing and fixing?
  • Are you ready for all the new browsers to be? How about new devices?