2016-07-12 38 views
5

Nei documenti .NET Core è presente una pagina intitolata "Creazione di viste specifiche per dispositivi mobili" ma è in costruzione: https://docs.asp.net/en/latest/mvc/views/mobile.html.Visualizzazioni specifiche per dispositivi mobili/Rilevamento dispositivo

Qualcuno ha qualche idea sulla creazione di viste mobili o sul rilevamento di dispositivi con successo?

+6

Nel vecchio framework ASP.NET MVC esisteva un rilevamento incorporato in cui è possibile denominare visualizzazioni come "MyView.cshtml" e "MyView.iOS.cshtml" o simili e ottenerle correttamente in base al loro utente agenti. Ma questa pratica è abbastanza scoraggiata al giorno d'oggi. È meglio creare un design reattivo che funzioni su tutti i dispositivi. Cerca "responsive design bootstrap" per esempio. Bootstrap è stato originariamente sviluppato da Twitter per realizzare un design reattivo – Tseng

+0

Probabilmente @Tseng è proprio qui, ma solo FYI (come non mi riguarda il responsive design: -)) ... se si vuole seguire ancora l'approccio di "MyView.cshtml "e" MyView.iOS.cshtml ", allora puoi dare un'occhiata a come funziona LanguageViewLocationExpander di MVC visto che sembra qualcosa di simile ... –

+0

@Tseng Se vuoi aggiungere un commento come risposta, lo contrassegnerò come accettato come è quello che dicono tutti. –

risposta

1

L'utilizzo di viste specifiche basate sullo user-agent del browser è un concetto obsoleto in quanto non indica sufficientemente le funzionalità del dispositivo. Ad esempio, iPhone e iPad sono disponibili in diverse dimensioni dello schermo e persino i browser mobili consentono di cambiare lo user-agent.

Il nuovo concetto si chiama Responsive Design dove si crea una singola pagina che si adatta e mostra/nasconde determinati elementi in base alla larghezza dello schermo disponibile. Uno dei più noti responsive deisgn CSS Framework è Bootstrap, originariamente sviluppato da Twitter e successivamente open-source.

Here è un esempio di progettazione reattiva. Quando si passa a e si modifica la larghezza del browser, il design viene aggiornato anche dal design di colonne da 3 a 2 a 1 con browser o navigazione mobile (con il menu Hamburger).

+1

È quasi sempre vero, ma ci sono casi in cui dovremmo inviare DOM diversi ai telefoni per piccoli schermi, invece di nascondere/mostrare. – martonx

+3

In alcuni casi il semplice design reattivo non è efficace. In alcuni casi questo porta a dimensioni molto grandi delle risorse del sito Web che possono portare a un carico iniziale lento. Un'altra cosa è JS - per la maggior parte dei siti moderni che hanno una quantità enorme di codice JS, ma alcuni siti di contenuti pesanti (aggregatori di notizie, e-comerces) potrebbero non avere bisogno di avere tutti questi tipi di contenuti sui dispositivi mobili, quindi potremmo semplicemente cancellare sul lato server. –

1

Questa funzione non è stata implementata da Microsoft. C'è paio di discussioni aperte a questa domanda:

https://github.com/aspnet/Mvc/issues/4877

https://github.com/aspnet/Razor/issues/751

come una risposta generica da loro - utilizzare il Responsive Web Design e media query CSS (che dal mio punto di vista non è la risposta ideale per squadra che si afferma per la costruzione di un framework web generale). C'è un'implementazione per questa funzione esiste come richiesta di pull - https://github.com/aspnet/Mvc/pull/4878

Dal momento che questa richiesta di pull sembra essere dimenticato, ho estratto questo codice nel progetto separato che è disponibile sul https://github.com/laskoviymishka/MvcDeviceDetector

È possibile utilizzare questa implementazione (che è facile aggiungere esistere porro MVC) o implementare questo stesso. Questo è abbastanza semplice - è sufficiente implementare e reqister proprio il IViewLocationExpander per quello.