asp.net mvc - Forma de adaptar el contenido al dispositivo móvil
asp.net-mvc user-interface (5)
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
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 usar 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
El método más rápido y fácil es descargar los guiones móviles de jquery.
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//|/-[a-w])|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;
}
<div id=''elid_01''>it load image</div>
<div id=''elid_02''>it dont load image</div>
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 objetivo no usa [teléfono de características] sino [teléfono inteligente] o algo mejor que css es realmente suficiente.