在移动设备上查看时，如何强制网站处于横向模式? [英] How do you force a website to be in landscape mode when viewed on a mobile device?
问题描述
我已经看到很多关于此的问题，但没有关于如何在使用 DefaultDisplayMode 类确定移动站点的 Razor/MVC 站点中执行此操作的明确答案.此外，很多答案只是代码片段，没有详细说明代码的去向(是否在控制器、视图、CSS 等中?)
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.?)
首先，有一个调用 EvaluateDisplayMode() 的全局文件:
So to start off, there is a Global file that calls EvaluateDisplayMode():
Global.asax.cs
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() 类型设置移动和桌面类:
The EvaluateDisplayMode in the App_Start folder sets up a mobile and desktop class based on the GetOverriddenUserAgent() type:
DeviceConfig.cs
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 的布局/母版页面，它使用名为 PhoneCommon.css 的 CSS 文件.CSS 没有什么特别之处(移动与桌面；即没有媒体查询；我没有正确使用 CSS，我从客户端使用的另一个开发人员那里继承了它)除了高度没有一直延伸到底部页.这是 CSS 的一部分(很长):
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:
#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:
The best answer seems to come from @uʍopǝpısdn here:
我们可以使用媒体查询/js/jquery 使我们的网页在移动/平板电脑的默认横向模式下打开吗?
，但它不起作用.我将旋转代码放在 PhoneCommon.css 中.它的作用是强制页面进入左上角而不旋转它.
, 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.
以下是我看过的其他一些网站，但没有一个给出完整的答案.有人可以告诉我如何让我的网站在移动设备上强制横向吗?谢谢.
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.
我们可以使用媒体查询/js/jquery 使我们的网页在移动/平板电脑的默认横向模式下打开吗?
http://www.w3.org/TR/2004/CR-css-print-20040225/#section-properties
推荐答案
简而言之，您不能也不应该通过网站控制用户的操作系统行为.
Short answer, you can't and you shouldn't control a user's OS behaviour via a website.
您可以使用以下问题的答案显示警告:强制网站仅以横向模式显示
You can display a warning using the answer on the following question: forcing web-site to show in landscape mode only
或者，即使在纵向模式下，您也可以使用以下代码强制您的布局看起来像横向(取自 http://www.quora.com/Can-I-use-Javascript-to-force-移动浏览器停留在纵向或横向模式):
Or you can force your layout to look like landscape even in portrait mode using the following code (taken from 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;
}
}
不过，正如第二个网站所建议的，您应该尝试让您的网站看起来不错，但是用户希望查看它.
As the second site recommends though, you should try and make your site look good however the user wishes to view it.
这篇关于在移动设备上查看时，如何强制网站处于横向模式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
