Cambio de hoja de estilo con Javascript basado en navegador

Actualmente estoy intentando editar un sitio web para un cliente que utiliza Adobe Contribute por lo que utiliza una hoja de estilos diferente si el usuario está navegando desde un teléfono móvil. La hoja de estilo del teléfono móvil es mucho más simple y retira las imágenes de fondo y los estilos para reducir el tiempo de carga. Entiendo que sería una mejor práctica tener un sitio web completamente separado para el móvil, pero esto no es práctico para el cliente, ya que necesita poder actualizar su contenido de sitios web mediante Contribute.

Esto está funcionando en algunos dispositivos ya como el iPhone (la última vez que he probado!), Pero en mi teléfono Android tengo un extraño problema. Cuando visite la URL o haga clic en un vínculo, muestra el sitio web utilizando la hoja de estilo predeterminada. Si actualizo la página, entonces decide mostrar el sitio renderizado con la hoja de estilo móvil. Es casi como si el UserAgent no está siendo recogido por mi código hasta que haga clic en actualizar.

Aquí está el código que estoy usando:

<link href="css/style.css" id="stylesheet" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var userAgent = navigator.userAgent; if(userAgent.search("Mobile")>=0) document.getElementById("stylesheet").href = "css/style_mob.css"; if(userAgent.search("Nokia")>=0) document.getElementById("stylesheet").href = "css/style_mob.css"; if(userAgent.search("SymbianOS")>=0) document.getElementById("stylesheet").href = "css/style_mob.css"; </script> 

La secuencia de comandos sólo se muestra para algunos dispositivos, pero se obtiene la idea general.

Mi cadena de agente de usuario es la siguiente:

/ 530.17 (KHTML, como Gecko) Versión / 4.0 Mobile Safari / 530.17 (KHTML, como Gecko) Versión de Mozilla / 5.0 (Linux; U; Android 2.1-actualización1; en-gb; T-Mobile_G2_Touch Build / ERE27)

EDITAR:

Debo añadir que he intentado utilizar las consultas de medios, pero esto no funciona en absoluto en el iPhone o Android. El código de arriba funciona una delicia en el iPhone. A continuación se muestra el código que estoy utilizando al intentar realizar este trabajo con consultas de medios.

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link href="../css/style.css" id="stylesheet" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="../css/style_mob.css" /> 

¿No puede usar consultas de medios para determinar qué hoja de estilo debe usar el navegador? La comprobación para los agentes individuales del usuario parece la manera incorrecta de ir sobre él.

Edit: Acabo de notar el código de consultas de medios que está utilizando y me di cuenta de que está utilizando una ruta de acceso diferente: css/style_mob.css cuando se utiliza el javascript y ../css/style_mob.css . ¿Es un error tipográfico o podría ser la razón por la que no está funcionando?

Navegadores de teléfono páginas de caché como los navegadores de escritorio. Antes de pasar demasiado tiempo buscando en el problema, asegúrese de que no es un problema de almacenamiento en caché.

Elimine la caché del teléfono y vuelva a visitar la URL. Dado que el CSS se carga correctamente después de una actualización, no me sorprendería si esto solucionara todo.

Además, usted menciona en su pregunta que es mejor tener un dominio separado por completo. Digo no necesariamente. Hay muchas razones por las que sólo desearía tener un dominio para cada plataforma. @media consultas y diseño web sensible puede ir grandes maneras. Si usted está interesado en el tema, usted debe definitivamente echa un vistazo a este artículo de una lista aparte. Podría darle una idea de cuáles son las posibilidades.

EDITAR:

Si todavía no funciona (que no parece), entonces tal vez debería probar su código de agente de usuario. En lugar de cargar tu estilo style.css para todos, elimina esa declaración y hazla condicional a que un navegador no sea android:

Quite la línea css de su html:

 <link href="css/style.css" id="stylesheet" rel="stylesheet" type="text/css" /> 

Y luego en su javascript:

 var normalCss = document.createElement('<link href="css/style.css" id="stylesheet" rel="stylesheet" type="text/css" />'); var mobileCss = document.createElement('<link href="css/mobile.css" id="stylesheet" rel="stylesheet" type="text/css" />'); if(userAgent.search("Android")>=0){ document.getElementsByTagName("head")[0].appendChild(mobileCss); } else { document.getElementsByTagName("head")[0].appendChild(normalCss); } 

Borrar el caché y probarlo. ¿Carga un css la primera vez o carga una página sin estilos?

Si no se carga la primera vez, esto podría significar que el código javascript no se ejecuta a tiempo. ¿Cómo lo llamas? ¿Está en la sección de la cabeza? ¿Está utilizando jQuery con $(document).ready o algo así?

He encontrado una solución para el problema del navegador Android no cargar una hoja de estilo CSS móvil a menos que actualizar la página. Llamo a esto un trabajo alrededor y no una solución permanente porque tengo un Web site donde android carga el css móvil en el primer intento sin un problema usando:

 <link media="handheld, only screen and (max-device-width: 480px)" href="mobile.css" type="text/css" rel="stylesheet" /> 

Pero tengo otro sitio web que utiliza el mismo código anterior para cargar el css y el navegador android se niega a usarlo a menos que actualice la página. He tratado de cambiar muchas partes de la html para que coincida con el sitio web que funciona, pero todo sin éxito. Así que aquí está el código de solución:

 <link media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="mobile.css" type="text/css" rel="stylesheet" /> 

"Handheld" permite a los teléfonos móviles más antiguos cargar mobile.css

"Sólo pantalla y (max-anchura: 480px)" obliga a los dispositivos Android a cargar mobile.css en el primer intento si tienen un ancho de 480px o menos.

"Solamente la pantalla y (anchura máxima del dispositivo: 480px)" permite que los nuevos teléfonos de la zarzamora, los iphones y los dispositivos androides USUALLY carguen mobile.css si tienen una anchura de 480px o menos

Windows Mobile 7 teléfonos con IE no utilice las nuevas etiquetas de medios por lo que tiene que utilizar este código para que carguen mobile.css:

 <!--[if IEMobile 7]> <link rel="stylesheet" type="text/css" href="mobile.css" media="screen" /> <![endif]--> 
FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.