Making a switchable Desktop and Mobile page in MVC 4

Question

I have created an adaptive website in MVC4. I know how to switch between desktop and mobile view for entire website using viewswitcher. My problem is I want to switch a single page to desktop view when a person visits that page from mobile device.

For Eg : There is an ActionResult Test, So when a person visits this page (Test) from Desktop then by default desktop view is displayed but when a person visits the same page from mobile again desktop view should be displayed instead of mobile. As my website is adaptive so there is a _Layout.Mobile.cshmtml page which is rendered automatically when a person is coming from mobile. To avoid this I had created test.Mobile.cshtml page in which I have set Layout = null; and copy pasted all the _Layout.cshtml html but as there are media queries for Mobile device all my Desktop css is getting overridden which doesn't serve the purpose.

So my question is how to switch a single page between desktop and mobile instead of entire site. All the other pages should function as it is (adaptive).

score 0 · Answer 1 · answered Dec 26 '14 at 07:14

Assuming the view in question is a "full" page (meaning it has no layout page and includes a well-formatted, complete HTML page), you would just need to omit the viewport meta tag from the head of that view. If you're not familiar with the viewport, Google has a decent post about it here: https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/set-the-viewport

If you need the "desktop mode" to be switchable, then simply add a conditional around the viewport element:

@if(ViewBag.EnableViewportScaling)
{
    <meta name="viewport" content="width=device-width, initial-scale=1" />
}

where I assume you can add a Boolean property to ViewBag at some point prior to rendering the view's markup.

I forgot to mention I even did this but even this doesn't help. There are jquery written based on the device width which is overriding the design. — Aliasgar Rajpiplawala, Dec 26 '14 at 07:16

score 0 · Answer 2 · answered Dec 26 '14 at 21:41

As I understand, this code must be located in `_ViewStart.cshtml':

@{
  if (isDesktopClient)
      Layout = "~/Views/Shared/_Layout.cshtml";
  else
      Layout = "~/Views/Shared/_Layout.mobile.cshtml";
}

So you need use the condition if (isDesktopClient || Request.Path == "~/Test").

Making a switchable Desktop and Mobile page in MVC 4

2 Answers2