title: How do you force a website to be in landscape mode when viewed on a mobile device?
body: <p>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.?)</p>
  
  <p>So to start off, there is a Global file that calls EvaluateDisplayMode():</p>
  
  <p>Global.asax.cs</p>
  
  <pre><code>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();
      }
  }
  </code></pre>
  
  <p>The EvaluateDisplayMode in the App_Start folder sets up a mobile and desktop class based on the GetOverriddenUserAgent() type:</p>
  
  <p>DeviceConfig.cs</p>
  
  <pre><code>public static class DeviceConfig
  {
      const string DeviceTypePhone = "Mobile";
  
      public static void EvaluateDisplayMode()
      {
          DisplayModeProvider.Instance.Modes.Insert(0,
              new DefaultDisplayMode(DeviceTypePhone)
              {
                  ContextCondition = (ctx =&gt; (
  
                      (ctx.GetOverriddenUserAgent() != null) &amp;&amp;
                      (
                        (ctx.GetOverriddenUserAgent().IndexOf("android", StringComparison.OrdinalIgnoreCase) &gt;= 0) ||
                      (ctx.GetOverriddenUserAgent().IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) &gt;= 0) ||
                      (ctx.GetOverriddenUserAgent().IndexOf("Window Phone", StringComparison.OrdinalIgnoreCase) &gt;= 0) ||
                      (ctx.GetOverriddenUserAgent().IndexOf("Blackberry", StringComparison.OrdinalIgnoreCase) &gt;= 0)
                      )
              ))
              });
      }
  }
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>The best answer seems to come from @uʍopǝpısdn here:</p>
  
  <p><a href="https://stackoverflow.com/questions/27012827/can-we-make-our-webpage-open-defaultly-in-landscape-mode-for-mobile-tablets-usin/27014471#27014471">Can we make our webpage open defaultly in landscape mode for mobile/tablets using media query/js/jquery?</a></p>
  
  <p>, 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.</p>
  
  <p>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.</p>
  
  <p><a href="https://stackoverflow.com/questions/27146742/foundation-force-landscape-mode-on-mobile-devices">Foundation: Force landscape mode on mobile devices</a></p>
  
  <p><a href="https://stackoverflow.com/questions/25638611/force-tablet-to-be-in-landscape-mode">Force tablet to be in landscape mode</a></p>
  
  <p><a href="https://stackoverflow.com/questions/27012827/can-we-make-our-webpage-open-defaultly-in-landscape-mode-for-mobile-tablets-usin/27014471#27014471">Can we make our webpage open defaultly in landscape mode for mobile/tablets using media query/js/jquery?</a></p>
  
  <p><a href="https://stackoverflow.com/questions/2772691/is-it-possible-to-prevent-iphone-ipad-orientation-changing-in-the-browser">Is it possible to prevent iPhone/iPad orientation changing in the browser?</a></p>
  
  <p><a href="http://www.w3.org/TR/2004/CR-css-print-20040225/#section-properties" rel="nofollow noreferrer">http://www.w3.org/TR/2004/CR-css-print-20040225/#section-properties</a></p>
  
  <p><a href="https://stackoverflow.com/questions/4806938/is-there-a-way-to-force-horizontal-landscape-layout-on-mobile-devices/4807047#4807047">Is there a way to force horizontal / landscape layout on mobile devices?</a></p>