在移动设备上查看时,如何强制网站处于横向模式？

Question

我已经看到了很多关于这方面的问题,但是对于如何在使用DefaultDisplayMode类确定移动网站的Razor/MVC网站中如何做到这一点没有明确的答案.此外,很多答案只是代码片段,没有代码所在的详细信息(在控制器,视图,CSS等？)

所以首先,有一个调用EvaluateDisplayMode()的Global文件:

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

App_Start文件夹中的EvaluateDisplayMode基于GetOverriddenUserAgent()类型设置移动和桌面类:

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

每个页面都有一个名为_AdminMaster.Mobile.cshtml的Layout/Master页面,它使用一个名为PhoneCommon.css的CSS文件.CSS没有什么特别之处(移动与桌面;没有媒体查询;我没有正确的CSS,我从客户端使用的另一个开发人员那里继承了它),除了高度没有一直延伸到底部页.这是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;
}

最好的答案似乎来自@uʍopǝpısdn:

我们可以使用媒体查询/ js/jquery在移动设备/平板电脑的横向模式下默认打开我们的网页吗？

,但它不起作用.我把旋转代码放在PhoneCommon.css中.它的作用是强制页面进入左上角而不是旋转它.

以下是我看过的其他一些网站,但没有一个显示完整的答案.有人可以告诉我如何让我的网站强制在移动设备上横向移动吗？谢谢.

基础:在移动设备上强制横向模式

强制平板电脑处于横向模式

我们可以使用媒体查询/ js/jquery在移动设备/平板电脑的横向模式下默认打开我们的网页吗？

是否可以防止iPhone/iPad在浏览器中的方向发生变化？

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

有没有办法强制移动设备上的水平/横向布局？

Answer 1

简短的回答,你不能,你不应该通过网站控制用户的操作系统行为.

您可以使用以下问题的答案显示警告: 强制网站仅以横向模式显示

或者,即使在纵向模式下,您也可以使用以下代码强制您的布局看起来像风景(摘自http://www.quora.com/Can-I-use-Javascript-to-force-a-mobile-browser-to - 纵向或横向模式):

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

正如第二个网站建议的那样,您应该尝试让您的网站看起来不错,但用户希望查看它.