CSS 在移动设备上查看时，如何强制网站处于横向模式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30761487/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you force a website to be in landscape mode when viewed on a mobile device?
提问by boilers222
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.?)
我已经看到很多关于此的问题，但没有关于如何在 Razor/MVC 站点中执行此操作的明确答案，其中移动站点是使用 DefaultDisplayMode 类确定的。此外，很多答案只是代码片段，没有详细说明代码的去向（是否在控制器、视图、CSS 等中？）
So to start off, there is a Global file that calls EvaluateDisplayMode():
首先，有一个调用 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();
}
}
The EvaluateDisplayMode in the App_Start folder sets up a mobile and desktop class based on the GetOverriddenUserAgent() type:
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)
)
))
});
}
}
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:
每个页面都有一个名为 _AdminMaster.Mobile.cshtml 的布局/母版页，它使用名为 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;
}
The best answer seems to come from @u?op?p?sdn here:
最好的答案似乎来自这里的@u?op?p?sdn：
我们可以使用媒体查询/js/jquery 为移动设备/平板电脑默认以横向模式打开我们的网页吗？
, 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.
，但它不起作用。我将旋转代码放在 PhoneCommon.css 中。它的作用是强制页面进入左上角而不旋转它。
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.
下面是我看过的其他一些网站，但没有一个给出完整的答案。有人可以告诉我如何让我的网站在移动设备上强制横向吗？谢谢。
Foundation: Force landscape mode on mobile devices
Force tablet to be in landscape mode
我们可以使用媒体查询/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
http://www.w3.org/TR/2004/CR-css-print-20040225/#section-properties
Is there a way to force horizontal / landscape layout on mobile devices?
回答by gaynorvader
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
您可以使用以下问题的答案显示警告： 强制网站仅以横向模式显示
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):
或者，即使在纵向模式下，您也可以使用以下代码强制您的布局看起来像横向（取自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;
}
}
As the second site recommends though, you should try and make your site look good however the user wishes to view it.
正如第二个站点所建议的那样，您应该尝试使您的站点看起来不错，但是用户希望查看它。
回答by iklas
try to use this:
尝试使用这个：
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
