Forma de adaptar el contenido al dispositivo móvil

Cuando creo un sitio y quiero que esté listo para dispositivos móviles, veo gente hablando de tecnología muy antigua pero todo parece ir a una experiencia móvil en la web.

Veo gente hablando de frameworks] para el desarrollo web móvil, también un amigo me habló sobre (wurfl) (‘ http://wurfl.sourceforge.net/java/wall.php ) para detectar características móviles y construir un archivo css apropiado haciendo adaptación de contenido.

Veo gente definiendo tres o cuatro archivos css y usando consultas de medios para hacer coincidir el dispositivo por tamaño de pantalla con diseño de fluido sensible, alguien me dijo que no puedes crear un contenido porque el flujo es diferente en la web y en el móvil pero no puedo ver por qué.

Necesito saber si hay algún truco de CSS para hacer una página (cargar) algunas imágenes en la plataforma de escritorio y (no cargar) / (cargar otra) en el móvil de una manera de mejora progresiva, pero alguien aquí:

¿Cuál es la forma más eficiente de ocultar contenido para una versión móvil de un sitio? )

está diciendo que con css las imágenes de truco solo están ocultas, pero aún se solicitan desde el servidor.

¿Es realmente necesaria una versión de url móvil con el mismo contenido?

Construiré utilizando asp net mvc e IIS / ASP / ASP.net: cómo estructurar el sitio web para exponer la versión móvil recomienda utilizar diferentes vistas.

Es esto necesario ?

Soy realmente un recién nacido en el desarrollo móvil y necesito algunos consejos sobre el mejor método para crear una versión móvil de un sitio web de MVC existente.

Gracias

Como está utilizando MVC, le recomendaría usar también jquery mobile. Recientemente trabajé en un proyecto utilizando MVC, Razor, FiftOne.Foundation y jquery mobile. Con las vistas de razor, puede cambiar la vista que se muestra al detectar si el agente de usuario de los navegadores informa que es un dispositivo móvil. De esta manera, no tiene que cambiar las URL MVC simplemente ofrece una vista diferente.

Tendré que buscar el tutorial que encontré y publicar un enlace al mismo

edit: Found it: Usando 51Degrees.Mobi Foundation para una detección precisa del navegador móvil en ASP.NET MVC 3

El método más rápido y fácil es descargar los guiones móviles de jquery.

http://jquerymobile.com/

tener un diseño maestro para dispositivos móviles, que tendrá el CSS correcto y luego crear vistas separadas o usar JSON para completar su contenido. eso funcionará más o menos en la mayoría de los teléfonos.

entonces solo necesita detectar si la plataforma móvil y redirigir en consecuencia

(function(a,b){if(/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[aw])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'http://detectmobilebrowser.com/mobile'); 

creado en http://detectmobilebrowser.com/ pero no probado.

ese es su método más rápido y probablemente robusto, sin embargo, estoy seguro de que las opiniones serán diferentes y esto, por supuesto, es solo una opinión.

Para carga de imagen condicional, úsalo:

 #elid_01 { height:30em; width:30em; background-image:url(http://www.mysite.com/img_01.png); } #elid_02 { height:30em; width:30em; } 
it load image
it dont load image

sobre el diseño líquido hay un ejemplo aquí

Cuando use el método de @liquidlay tenga cuidado con la ventana gráfica.
Existe en el modo peculiar una muy buena explicación sobre la metaetiqueta de la ventana gráfica .
No olvide probar su sitio con el soporte css desactivado en el navegador, con esta extensión de Firefox puede hacerlo.
Creo que su objective no usa [teléfono destacado] sino [teléfono inteligente] o algo mejor que css es realmente suficiente.

Si lo está haciendo con Asp net MVC, debería ver las directrices de Microsoft para dispositivos móviles con MVC aquí .
Hay otra pregunta sobre dispositivos móviles aquí .