在移动设备上查看时如何强制网站处于横向模式?
How do you force a website to be in landscape mode when viewed on a mobile device?
我已经看到很多关于此的问题,但没有关于如何在使用 DefaultDisplayMode class 确定移动站点的 Razor/MVC 站点中执行此操作的明确答案。此外,很多答案只是代码片段,没有详细说明代码的去向(它在控制器、视图、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() 类型设置移动和桌面 class:
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 在这里:
Can we make our webpage open defaultly in landscape mode for mobile/tablets using media query/js/jquery?
,但它不起作用。我把旋转代码放在 PhoneCommon.css 中。它所做的是强制页面进入左上角并且不旋转它。
下面是我浏览过的其他一些网站,但 none 显示了完整的答案。有人可以告诉我如何让我的网站在移动设备上强制横向显示吗?谢谢。
Foundation: Force landscape mode on mobile devices
Force tablet to be in landscape mode
Can we make our webpage open defaultly in landscape mode for mobile/tablets using 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
Is there a way to force horizontal / landscape layout on mobile devices?
简短回答,您不能也不应该通过网站控制用户的 OS 行为。
您可以使用以下问题的答案显示警告:
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;
}
}
正如第二个网站所建议的那样,您应该尝试让您的网站看起来不错,但是用户希望查看它。
尝试使用这个:
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
我已经看到很多关于此的问题,但没有关于如何在使用 DefaultDisplayMode class 确定移动站点的 Razor/MVC 站点中执行此操作的明确答案。此外,很多答案只是代码片段,没有详细说明代码的去向(它在控制器、视图、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() 类型设置移动和桌面 class:
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 在这里:
Can we make our webpage open defaultly in landscape mode for mobile/tablets using media query/js/jquery?
,但它不起作用。我把旋转代码放在 PhoneCommon.css 中。它所做的是强制页面进入左上角并且不旋转它。
下面是我浏览过的其他一些网站,但 none 显示了完整的答案。有人可以告诉我如何让我的网站在移动设备上强制横向显示吗?谢谢。
Foundation: Force landscape mode on mobile devices
Force tablet to be in landscape mode
Can we make our webpage open defaultly in landscape mode for mobile/tablets using 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
Is there a way to force horizontal / landscape layout on mobile devices?
简短回答,您不能也不应该通过网站控制用户的 OS 行为。
您可以使用以下问题的答案显示警告: 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;
}
}
正如第二个网站所建议的那样,您应该尝试让您的网站看起来不错,但是用户希望查看它。
尝试使用这个:
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}