I've seen a lot of questions about this, but no definitive answer on how to do this in a Razor/MVC site where the mobile site is determined using the DefaultDisplayMode class. Also, a lot of the answers are just code snippets without details on where the code goes (is it in the controller, view, CSS, etc.?)
So to start off, there is a Global file that calls EvaluateDisplayMode():
Global.asax.cs
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
BundleConfig.RegisterBundles(BundleTable.Bundles);
WebApiConfig.Register(GlobalConfiguration.Configuration);
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
DeviceConfig.EvaluateDisplayMode();
}
}
The EvaluateDisplayMode in the App_Start folder sets up a mobile and desktop class based on the GetOverriddenUserAgent() type:
DeviceConfig.cs
public static class DeviceConfig
{
const string DeviceTypePhone = "Mobile";
public static void EvaluateDisplayMode()
{
DisplayModeProvider.Instance.Modes.Insert(0,
new DefaultDisplayMode(DeviceTypePhone)
{
ContextCondition = (ctx => (
(ctx.GetOverriddenUserAgent() != null) &&
(
(ctx.GetOverriddenUserAgent().IndexOf("android", StringComparison.OrdinalIgnoreCase) >= 0) ||
(ctx.GetOverriddenUserAgent().IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) >= 0) ||
(ctx.GetOverriddenUserAgent().IndexOf("Window Phone", StringComparison.OrdinalIgnoreCase) >= 0) ||
(ctx.GetOverriddenUserAgent().IndexOf("Blackberry", StringComparison.OrdinalIgnoreCase) >= 0)
)
))
});
}
}
Each page has a Layout/Master page called _AdminMaster.Mobile.cshtml which uses a CSS file called PhoneCommon.css. There's nothing special about the CSS (mobile vs. desktop; i.e. no media queries; I didn't right the CSS, I inherited it from another developer the client used) except the height doesn't extend all the way to the bottom of the page. Here's a portion (it's quite lengthy) of the CSS:
#main #content {
float:left;
display:block;
width:100%;
margin:0 auto;
position: relative;
top:7px;
left:0;
border:1px solid #000;
box-shadow:0 0 0 1px #464646;
-webkit-box-shadow:0 0 0 1px #464646;
-moz-box-shadow:0 0 0 1px #464646;
background:url(../images/login_bg.png) repeat top center;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
position:relative;
min-height:300px; padding-bottom:30px;
}
The best answer seems to come from @uʍopǝpısdn here:
, but it doesn't work. I put the rotate code in PhoneCommon.css. What it does is force the page into the upper left hand corner and doesn't rotate it.
Below are some other sites I looked at, but none show a complete answer. Can someone show me how to get my site to force to landscape on mobile devices? Thanks.
Foundation: Force landscape mode on mobile devices
Force tablet to be in landscape mode
Is it possible to prevent iPhone/iPad orientation changing in the browser?
http://www.w3.org/TR/2004/CR-css-print-20040225/#section-properties
Is there a way to force horizontal / landscape layout on mobile devices?
Short answer, you can't and you shouldn't control a user's OS behaviour via a website.
You can display a warning using the answer on the following question: forcing web-site to show in landscape mode only
Or you can force your layout to look like landscape even in portrait mode using the following code (taken from http://www.quora.com/Can-I-use-Javascript-to-force-a-mobile-browser-to-stay-in-portrait-or-landscape-mode):
As the second site recommends though, you should try and make your site look good however the user wishes to view it.