Javascript navigator.userAgent always show the same agent in Firefox

Question

I'm using the Modify Headers plugin for Firefox in order to change the user-agent. The reason I need to do this (for testing), is to load different css depending on if it is an iOS or Android phone.

Running this script

  <script type="text/javascript">
    var agent = navigator.userAgent.toLowerCase();
    alert(agent);
  </script>

I always get this output:

mozilla/5.0 (windows nt 6.1; wow64; rv:26.0) gecko/20100101 firefox/26.0

even though I can see in the following in Thunderbird:

User-Agent: Mozilla/5.0 (iPad; CPU OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko ) Version/5.1 Mobile/9B176 Safari/7534.48.3

Is this a Firefox specific issue?

I don't get it. You ask if the fact your firefox plugin doesn't seem to work is a Firefox specific issue ? — Denys Séguret
Yes - or if it's wrong usage of navigator.userAgent in order to detect device. — Steven
@Steven - In general it is considered bad practice to use the user agent string to do device/browser detection. Code should be written to adapt to the capabilities of the browser it is running on, without having to use the user agent string, ie using Feature detection rather than Browser detection. Tools like Modernizr can help with this. (there are a few cases where browser detection may still be required, but they're rare, and mainly confined to old IE versions) — Spudley
@Spudley Thanks Sprudley. The issue is that my customer has a 3rd party developing iOS and Adroid app while we are developing templates using HTML5. The app will use WebView to display the HTML5 pages. The customer want it to look like an app and therefore we need different styling for iOS and Android. I've not used Feature detection before. Altough I can't find any good examples, I found this article: msdn.microsoft.com/en-us/library/ie/hh273397%28v=vs.85%29.aspx — Steven

Spudley Spudley · Accepted Answer · 2014-01-20T13:48:55

Modifying the user agent via the headers will indeed change the UA string that the server sees.

However, it doesn't mean that you're actually changing the User agent string that the browser knows about.

You're querying the UA string via javascript; that will be getting the actual UA string in the browser; nothing to do with the headers that have been sent to the server.

If you want to override the UA string properly, there are firefox extensions that specialise in doing so. I suggest you use one of them, rather than a generic header override extension.

Javascript navigator.userAgent always show the same agent in Firefox

1 Answers