Optimización para dispositivos móviles

[xav_ogame]

Hola, estoy optimizando una web para dispositivos móviles (ya la tengo hecha, de hecho), y me ha surgido la duda de cómo es más eficiente o en general mejor hacerlo.

Yo lo he implementado del siguiente modo:
- Una función javascript se encarga de cargar un css que se pasa como parámetro:

Código PHP:

  function loadCss(css) { ... } 
   

- Al cargar la página (window.onload), comprobamos, también mediante javascript, el tamaño de la pantalla:

Código PHP:

  if (screen.width < 481) loadCss('css/estilo-movil.css');
else loadCss('css/estilo.css'); 
   

Y en caso de no tener activado JavaScript, cargar la versión de escritorio directamente:

Código HTML:

<noscript>
<link rel="stylesheet" type="text/css" href="css/estilo.css" />
</noscript> 

Así pues, ¿hay algún modo mejor de hacerlo? ¿Todos son igual de buenos / efectivos / eficientes?

También podría hacerlo por css, si fuera mejor a la hora de la carga de la web, ya que la web es en php.

Gracias, un saludo.

[Tedel]

El mejor método es un solo archivo CSS, sin Javascript.

[xav_ogame]

¿Con los "media" de CSS? Pero eso es para adaptarlo en función del ancho, ¿y si en un dispositivo móvil quiero cambiar a versión de escritorio? ¿Hay algún modo de hacerlo como dices?

PD: Se me ha olvidado decir en el post inicial que también hago eso, abajo hay un "cambiar a versión de escritorio" que llama a la función loadCss('css/estilo.css'); , y "cambiar a versión móvil" que llama a loadCss('css/estilo-movil.css');

[kseso?]

"Responsive web design" o en español:

Diseño web interactivo
Diseño Web Adaptable
Maquetación Adaptativa
Diseño Sensible
Diseño Web Responsivo

que no hay consenso.

Que por cierto, es algo más que un css en función del dispositivo.

[xav_ogame]

Es decir, mismo diseño y adaptarse en función del dispositivo. Yo es que tenía una versión "minimalista" por así decirlo. Voy a intentar con media queries, a ver qué tal se da.

Gracias por la información.