css - How do you force a website to be in landscape mode when viewed on a mobile device? -

i've seen lot of questions this, no definitive answer on how in razor/mvc site mobile site determined using defaultdisplaymode class. also, lot of answers code snippets without details on code goes (is in controller, view, css, etc.?)

so start off, there global file 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 app_start folder sets mobile , desktop class based on 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 layout/master page called _adminmaster.mobile.cshtml uses css file called phonecommon.css. there's nothing special css (mobile vs. desktop; i.e. no media queries; didn't right css, inherited developer client used) except height doesn't extend way bottom of page. here's portion (it's quite lengthy) of 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 come @uʍopǝpısdn here:

can make our webpage open defaultly in landscape mode mobile/tablets using media query/js/jquery?

, doesn't work. put rotate code in phonecommon.css. force page upper left hand corner , doesn't rotate it.

below other sites looked at, none show complete answer. can show me how site force landscape on mobile devices? thanks.

foundation: force landscape mode on mobile devices

force tablet in landscape mode

can make our webpage open defaultly in landscape mode mobile/tablets using media query/js/jquery?

is possible prevent iphone/ipad orientation changing in browser?

http://www.w3.org/tr/2004/cr-css-print-20040225/#section-properties

is there way force horizontal / landscape layout on mobile devices?

short answer, can't , shouldn't control user's os behaviour via website.

you can display warning using answer on following question: forcing web-site show in landscape mode only

or can force layout landscape in portrait mode using following code (taken http://www.quora.com/can-i-use-javascript-to-force-a-mobile-browser-to-stay-in-portrait-or-landscape-mode):

@media screen , (orientation:landscape) {    #container {     -ms-transform: rotate(-90deg); /* ie 9 */     -webkit-transform: rotate(-90deg); /* chrome, safari, opera */     transform: rotate(-90deg);     width: /* screen width */ ;     height: /* screen height */ ;     overflow: scroll;   } } 

as second site recommends though, should try , make site user wishes view it.