2011-07-21 15 views
7

Estoy buscando métodos para diseñar una aplicación de Rails para uso móvil.Cambio de estilo móvil en Rails 3, método de ayuda frente a consultas de medios

La idea es común, utilizando un conjunto de estilos para navegadores móviles y otro conjunto de tradicionales.

De lo que puedo decir que hay dos maneras básicas de hacer esto en Rails:

Usando un método de ayuda para detectar el agente de usuario y luego el interruptor de preformas.

application_controller.rb

private 
def mobile? 
    request.user_agent =~ /Mobile|webOS/ 
end 

helper_method :mobile? 

application.html.erb

<% unless mobile? %> 
<%= stylesheet_link_tag "core" %> 
<%else%> 
    <%= stylesheet_link_tag "mobile" %> 
    <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> 
<% end%> 

o el uso de preguntas de los medios en las hojas de estilo

body { 
// basic styles 
} 

@media all and (max-width: 600px) { 
body { 
// extra styles for mobile 
} 
} 

@media all and (min-width: 600px) { 
body { 
    // extra styles for desktop 
} 
} 

Mi pregunta es ¿cuáles son las compensaciones? ¿Es un método generalmente mejor o hay buenos casos de uso para ambos?

Gracias de antemano

Respuesta

9

Depende.

En mi personal website utilizo consultas de medios para cambiar los estilos de los navegadores móviles. Esto funciona bastante bien en este caso porque la página tiene muy pocas imágenes y la mayoría de los cambios de estilo son solo para hacer que el sitio web sea vertical y reducir el tamaño de las fuentes.

Lamentablemente, sin embargo, not every mobile phone understands consultas de medios. Además, dependiendo de lo que esté haciendo con sus consultas de medios, puede ser sacrificing performance by using media queries. Por ejemplo, reducir la visualización de imágenes grandes u ocultar contenido afecta negativamente el rendimiento en teléfonos móviles con restricciones de red.

Para sitios web complicados, es posible que también desee crear sitios web completamente diferentes para personalizar la experiencia móvil. Usar el enfoque de "ayuda" le permite personalizar más que solo la hoja de estilo. Esto también permite a los usuarios móviles acceder al sitio web "normal" en sus teléfonos al pasar un parámetro adicional que se tiene en cuenta en su método mobile?.

En resumen: si es simple, las consultas de medios son una manera fácil de personalizar la visualización, sin embargo, la experiencia móvil será más holísticamente diferente a los ajustes mínimos de visualización. Intentar usar CSS para personalizar toda la experiencia no es una buena idea.

Cuestiones relacionadas