El sitio en cuestión está aquí:

http: //autisticadovcacy.uniongraphics.or

riginalmente, @ diseñé esto usando un archivo CSS para los estilos predeterminados, de impresión y móviles, usando@media print y@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) para separar esos estilos.

También tengo hojas de estilo separadas para un par de modificaciones relacionadas con la accesibilidad (aumenta el tamaño de letra, los cambios de contraste). Estoy usando un script PHP de cambio de estilo para permitir al usuario cambiar estos estilos manualmente. Enlace al cambiador de estilos en el encabezado de esta manera:

<link rel="stylesheet" href="/wp-content/themes/asan/css/switcher.php?default=style.css" type="text/css" />

y defina el estilo predeterminado comostyle.css.

Todo esto funcionaba bien hasta que el cliente dijo que quería proporcionar una manera para que los usuarios volvieran a la disposición predeterminada desde un dispositivo móvil. Pensé que sacaría todos mis estilos móviles en una hoja de estilo separada, agregaría un enlace adicional en el archivo de encabezado para cargar esa hoja de estilo usando la misma consulta de medios que antes, y luego agregaría un enlace de cambio de estilo en el pie de página para permitir a los usuarios para volver a la hoja de estilo principal si lo prefiere.

Pero cuando eliminé mis estilos móviles de la hoja de estilos principal y agregué esta línea en el encabezado después de cargar la hoja de estilos principal:

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

... los estilos móviles ya no son los últimos en la cascada de alguna manera. El archivo mobile.css se está cargando, pero solo se muestran los estilos marcados! Important; todo lo demás está predeterminado en la hoja de estilo principal.

Pensé que tal vez esto se debía a que la hoja de estilo móvil se estaba cargando fuera de la secuencia de comandos styleswitcher, así que probé

<link media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" href="/wp-content/themes/asan/css/switcher.php?default=mobile.css" />

pero eso tampoco funciona.

¿Alguien puede encontrar mi error en cómo configuro esto y / o recomendar una mejor manera de permitir que los usuarios cambien entre vistas estándar y móviles (salvo crear un sitio móvil completamente separado y usar un redireccionamiento, que espero evitar)