How to create a View for screens with width less than X

Question

I have a site MVC4, which is not responsive, and change all its implementation just to make it responsive does not seem to me at all productive, because it is a site where worked many people and there is a lot of "junk" behind that will complicate my life.

My idea was to create Views from scratch, but these would only be presented in devices mobile. This way I built the site in bootstrap, and when I had enough pages I used these views to always be displayed on any screen (how I plan to do with bootstrap will work all right).

I saw some articles that added .Mobile in the _Layout.cshtml, getting _Layout.Mobile.cshtml but I don’t think that’s exactly what I’m looking for.

Answer 1

The simplest way to develop targeting by screen size is by using CSS:

@media screen and (min-width: 480px) {
    body {
        /* Estilos caso a tela tenha 480px de largura ou mais */
    }
}

Basically, you can use 4 types of media:

• All (all types);
• Print (layout of printing);
• Screen ();
• Speech (a speech software or device).

You can also make the MVC identify the User Agent (in case, browser version) and return a specific layout to it as you specified in your question. Here is a full description of how to use, but basically just use the following in your Global.asax.cs:

protected void Application_Start()
{
    var displayModes = DisplayModeProvider.Instance.Modes;

    ...
}

Only this already enables the use of a _Layout.Mobile.cshtml or of Views with .Mobile.cshtml, MVC automatically changes the layout for you.