12th Design of user interface design Adaptive UI layout

1. Overview

With the growing popularity of mobile phones and tablet devices, developers have to consider the presence of MVC sites on mobile devices.

This chapter includes programs that run on multiple devices (screen resolution, css,html), and the design of a mobile-side web program.

2. Main content

　　2.1 Programs running on multiple devices (screen resolution, css,html)

The default MVC project template supports desktop browsers that run in a Panorama view.

You can use @media queries to develop styles for different resolutions.

CSS3 allows the design to be considered based on the maximum screen width.

/*Landscape phone to portrait tablet up to 768px*/@media (max-width:767px){#container {/*Layout specific CSS*/} }  /*Portrait tablet to landscape and desktop (width between 768 and 980px)*/@media (min-width:768px) and (MAX-WIDTH:979PX) and (orientation:portrait){#container {/*Layout specific CSS*/} }  /*Large Desktop*/@media (min-width:980px){#container {/*Layout specific CSS*/} }

If you want to fit a smaller screen, you should create a mobile-friendly template page.

The jquery Mobile platform package provides a unified way to manage different mobile platforms using the same code.

　　2.2 Designing a mobile-side web Program

You can support a variety of mobile browsers by modifying the Global.asax file.

namespacemvcapplication { Public classMvcApplication:System.Web.HttpApplication {protected voidApplication_Start () { DisplayModeProvider.Instance.Modes.Insert (  0, new  defaultdisplaymode ("Windows") {Contextcondition = (context = context.) Getoverriddenuseragent (). IndexOf ("Windows", StringComparison.OrdinalIgnoreCase) >= 0 )             });             Arearegistration.registerallareas ();             Webapiconfig.register (globalconfiguration.configuration);             Filterconfig.registerglobalfilters (globalfilters.filters);             Routeconfig.registerroutes (routetable.routes);             Bundleconfig.registerbundles (Bundletable.bundles);         Authconfig.registerauth (); }     } }

3. Summary

①asp.net MVC4 has several ways to support mobile users. You can create overloaded views for multiple devices, or you can develop for a single device.

System.Web.Mvc.VirtualPathProviderViewEngine.DisplayModeProvider can determine the source based on the request and return the corresponding custom-made view.

② there is another way to design a mobile-accessible site, which is to use viewport <meta> tags and CSS @media queries. You can group development styles based on the maximum and minimum width of the screen.

The ③jquery Mobile Library allows the use of tags (markup) to provide additional functionality to the client browser. If you encounter an unsupported browser, you can also downgrade to an alternative method.

12th Design of user interface design Adaptive UI layout