09 diciembre 2009

Cómo detectar el navegador del usuario con JavaScript

Me voy a ir apuntando en algún sitio todas esas búsquedas que voy haciendo por los mares virtuales, para ver si de una vez por todas no hago las mismas cada vez que me enfrento a los mismos problemas.
Hoy hay que localizar el navegador del usuario. Por qué? Bien, la razón es que el Internet Explorer tiene una manera de interpretar las medidas de la caja del modelo CSS. La manera no es ilógica (como en un principio pensé, soy malo, y qué?) pero es diferente a la de los demás, y no cumple la recomendación del W3C. Así que me toca localizar el navegador, y aplicar la hoja de estilos en función del navegado. Amos p'allà...!


Como lo estoy haciendo con jsp, tiramos de google, y probamos una de las millones de opciones, que, como no, funciona. http://www.ericgiguere.com/articles/how-to-detect-internet-explorer.html





<%
String ua = request.getHeader( "User-Agent" );
boolean isFirefox = ( ua != null && ua.indexOf( "Firefox/" ) != -1 );
boolean isMSIE = ( ua != null && ua.indexOf( "MSIE" ) != -1 );
response.setHeader( "Vary", "User-Agent" );
%>

<p> <%=ua %></p>




Por ejemplo, para mi nuevo y flamante Google Chrome para MAC OSX, la respuesta es


Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_2; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.0.249.30 Safari/532.5

Para el Firefox 3.5.5 para MAC OSX, la respuesta es:

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; es-ES; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5 GTB6

Me quedan las pruebas para los navegadores sobre Windows, para ver respuestas y en función de cada uno cargar un CSS u otro.