Wie kann Sie zwingen, eine website im landscape-Modus bei der Anzeige auf einem mobilen Gerät?

Ich habe gesehen eine Menge Fragen über diese, aber keine endgültige Antwort auf, wie dies zu tun in einer Razor - /MVC-Website, wo die mobile Website wird ermittelt, indem die DefaultDisplayMode Klasse. Auch, viele der Antworten sind nur code-snippets, ohne details auf, wo der code geht (ist es in der controller-Ansicht, CSS, etc.?)

Damit zu beginnen, gibt es eine Globale Datei, die nennt 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();
    }
}

Den EvaluateDisplayMode in der App_Start-Ordner festlegt, eine mobile-und desktop-Klasse basierend auf der GetOverriddenUserAgent() Typ:

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)
                    )
            ))
            });
    }
}

Jede Seite hat ein Layout/Master-Seite aufgerufen _AdminMaster.Mobile.cshtml, die verwendet eine CSS-Datei namens PhoneCommon.css. Es gibt nichts besonderes über die CSS (mobile vs. desktop; d.h. keine media queries; ich wußte nicht Recht, die CSS, ich erbte es von einem anderen Entwickler die client verwendet), außer die Höhe erweitern nicht den ganzen Weg um den unteren Rand der Seite. Hier ist ein Teil (es ist ziemlich lang) von der 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;
}

Die beste Antwort scheint zu kommen von @uʍopǝpısdn hier:

Können wir unsere Webseite öffnen defaultly im landscape-Modus für mobile/tablets mit media-query/js/jquery?

aber es funktioniert nicht. Ich legte das drehen-code in PhoneCommon.css. Was Sie tut, ist zu zwingen, die Seite in der linken oberen Ecke und nicht drehen.

Unten sind einige andere Websites, die ich sah, aber keiner zeigt eine vollständige Antwort. Kann mir jemand zeigen, wie man meine Website zu zwingen, Landschaft auf mobile Geräte? Danke.

Foundation: Force-landscape-Modus auf mobilen Geräten

Kraft tablet im landscape-Modus

Können wir unsere Webseite öffnen defaultly im landscape-Modus für mobile/tablets mit media-query/js/jquery?

Ist es möglich, zu verhindern, dass iPhone/iPad Ausrichtung ändert sich im browser?

http://www.w3.org/TR/2004/CR-css-print-20040225/#section-properties

Gibt es eine Möglichkeit zu zwingen, horizontal /Querformat-layout auf mobilen Geräten?

InformationsquelleAutor boilers222 | 2015-06-10

7

Kurze Antwort, man kann nicht und man sollte nicht die Kontrolle des Benutzers OS-Verhalten über eine Webseite.

Können Sie eine Warnung anzeigen, mit der Antwort auf folgende Frage:
zwingen web-site zu zeigen, im landscape-Modus nur

Oder Sie können erzwingen, dass Ihr layout Aussehen Landschaft auch im portrait-Modus mit dem folgenden code (aus http://www.quora.com/Can-I-use-Javascript-to-force-a-mobile-browser-to-stay-in-portrait-or-landscape-mode):
```
@media screen and (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;
  }
}
```
Als die zweite Seite empfiehlt jedoch, Sie sollten versuchen, und machen Sie Ihre Website gut Aussehen, jedoch der Benutzer wünscht, um es anzuzeigen.
- Danke. Ich bin damit einverstanden, dass die Website sollte gut Aussehen aber der Benutzer will. Leider ist es der client, die wollten, dass dieses feature.
- Versuchen Sie davon zu überzeugen, dass es eine schlechte Idee, aber Sie werden wahrscheinlich am Ende mit, um es zu hacken, zusammen mit dem zweiten Beispiel zu, da Kunden dazu neigen, nicht zu hören :/
InformationsquelleAutor gaynorvader

diese zu verwenden:

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

InformationsquelleAutor iklas

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.