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

db2dz4w8 于 2022-12-15 发布在其他

关注(0)|答案(3)|浏览(111)

我已经看到了很多关于这个问题的问题，但是对于如何在Razor/MVC站点中使用DefaultDisplayMode类来确定移动的站点，没有明确的答案。而且，很多答案只是代码片段，没有关于代码位置的细节（是在控制器、视图、CSS等中吗？）
首先，有一个调用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();
    }
}

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.移动的.cshtml的布局/母版页面，它使用一个名为PhoneCommon.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 oppısdn这里：
我们可以使用media query/js/jquery在移动的/平板电脑上默认以横向模式打开网页吗？
，但它不起作用。我把rotate代码放在PhoneCommon.css中。它所做的是强制页面进入左手角，而不是旋转它。
下面是我看过的一些其他网站，但没有一个给出完整的答案。有人能告诉我如何让我的网站在移动的设备上强制景观吗？谢谢。
Foundation: Force landscape mode on mobile devices
Force tablet to be in landscape mode
我们可以使用media query/js/jquery在移动的/平板电脑上默认以横向模式打开网页吗？
Is it possible to prevent iPhone/iPad orientation changing in the browser?
http://www.w3.org/TR/2004/CR-css-print-20040225/#section-properties
有没有办法在移动的设备上强制水平/横向布局？

css

来源：https://stackoverflow.com/questions/30761487/how-do-you-force-a-website-to-be-in-landscape-mode-when-viewed-on-a-mobile-devic

3条答案

按热度按时间

ubof19bj1#

简单地说，你不能也不应该通过网站控制用户的操作系统行为。
您可以使用以下问题的答案显示警告：forcing web-site to show in landscape mode only
或者你也可以使用下面的代码（摘自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;
  }
}

正如第二个网站所建议的，你应该尝试让你的网站看起来很好，无论用户希望查看它。

赞(0）回复(0）举报 2022-12-15

bkkx9g8r2#

试着用这个：

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

}

赞(0）回复(0）举报 2022-12-15

cx6n0qe33#

#container {
    display: block;
}

@media only screen and (orientation: portrait) {
  #container {
    height: 100vh;
    width: 100vh;
    overflow-x: auto;
    position: absolute;
    top: 100%;
    right: 0;
    transform-origin: 100% 0vh 0;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@media only screen and (orientation:landscape) {
  #container {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

赞(0）回复(0）举报 2022-12-15

我来回答

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

3条答案

相关问题

热门标签

最新问答