强制“横向”定向模式

Posted

技术标签:

【中文标题】强制“横向”定向模式【英文标题】:Force “landscape” orientation mode 【发布时间】:2013-01-16 14:25:29 【问题描述】:

我正在尝试为我的应用程序强制使用“横向”模式,因为我的应用程序绝对不是为“纵向”模式设计的。 我怎样才能做到这一点?

【问题讨论】:

【参考方案1】:

现在可以使用 HTML5 webapp 清单。见下文。


原答案:

您无法将网站或 Web 应用程序锁定在特定方向。这违背了设备的自然行为。

您可以使用这样的 CSS3 媒体查询检测设备方向:

@media screen and (orientation:portrait) 
    // CSS applied when the device is in portrait mode


@media screen and (orientation:landscape) 
    // CSS applied when the device is in landscape mode

或者通过像这样绑定一个 javascript 方向改变事件:

document.addEventListener("orientationchange", function(event)
    switch(window.orientation) 
      
        case -90: case 90:
            /* Device is in landscape mode */
            break; 
        default:
            /* Device is in portrait mode */
    
);

2014 年 11 月 12 日更新:现在可以使用 HTML5 网络应用清单。

html5rocks.com 中所述,您现在可以使用manifest.json 文件强制定向模式。

您需要将这些行包含到 json 文件中:


    "display":      "standalone", /* Could be "fullscreen", "standalone", "minimal-ui", or "browser" */
    "orientation":  "landscape", /* Could be "landscape" or "portrait" */
    ...

您需要将清单包含到您的 html 文件中,如下所示:

<link rel="manifest" href="manifest.json">

不完全确定 webapp 清单上对锁定方向模式的支持是什么,但 Chrome 肯定在那里。当我有信息时会更新。

【讨论】:

是的,webapps 也是如此。即使您将网站“保存”到 iPhone 或 iPad 的主屏幕上,网络应用程序也会改变其方向。 根据 caniuse.com,从 android 4.1 开始就可以使用清单。见caniuse.com/#feat=offline-apps 如何判断清单是否被调用?它对我不起作用,尽管清单与其链接的 index.html 位于同一位置,但我的开发工具的网络中没有显示任何内容。 在 Chrome 中,您现在可以在检查模式下检查“应用程序”选项卡,有一个“清单”页面,其中直接链接到您的 json 文件及其相关信息。 @RémiBreton - 你还在寻找那个信息,所以你可以更新吗?我们已经耐心等待了 年!【参考方案2】:
screen.orientation.lock('landscape');

将强制它更改为并保持在横向模式。在 Nexus 5 上测试。

http://www.w3.org/TR/screen-orientation/#examples

【讨论】:

无法在 Android 上使用默认的互联网浏览器(不是 chrome) - 有什么想法吗? 未针对 Safari(ios 和 macOS)实现:caniuse.com/#feat=screen-orientation 请注意,这仅在进入全屏模式后有效。 Mozilla 不鼓励这种方法:developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation 浏览器兼容性也很差 这在 chrome 中甚至无法在全屏模式下工作:|【参考方案3】:

我使用一些像这样的 css(基于css tricks):

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) 
  html 
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  

【讨论】:

我使用了这个答案.. 我所要做的就是将媒体查询从landscape 更改为portrait,它按预期工作@media screen and (orientation: portrait) 编辑了答案以帮助未来的人们。当前模式为portrait 时应应用旋转(以便可以切换到landscape)。 谢谢。我一直在寻找这样的东西。 如何通过 page-id-xxx 仅在单个页面上应用它? 谢谢你!我发现您需要将所有 CSS 文件(纵向模式)中的每个 vh 更改为 vwvw 更改为 vh ......所以如果有人没有成功,可能是因为它。 【参考方案4】:

我有同样的问题,它是缺少 manifest.json 文件,如果没有找到,浏览器决定方向是最合适的,如果你没有指定文件或使用错误的路径。

我修复了仅在 html 标头上正确调用 manifest.json 的问题。

我的 html 标头:

<meta name="application-name" content="App Name">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="manifest" href="manifest.json">
<meta name="msapplication-starturl" content="/">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#">
<meta name="msapplication-TileColor" content="#">
<meta name="msapplication-config" content="browserconfig.xml">
<link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#ffffff">
<link rel="shortcut icon" href="favicon.ico">

以及manifest.json文件内容:


  "display": "standalone",
  "orientation": "portrait",
  "start_url": "/",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "icons": [
  
    "src": "android-chrome-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  

要生成您的网站图标和图标,请使用此网络工具: https://realfavicongenerator.net/

要生成清单文件,请使用: https://tomitm.github.io/appmanifest/

我的 PWA 效果很好,希望对您有所帮助!

【讨论】:

以上是关于强制“横向”定向模式的主要内容,如果未能解决你的问题,请参考以下文章

定向更改时的列表视图的自定义对话框(横向模式)

在 App Delegate 级别基于设备强制定向和禁用旋转?

IIS 强制 https 重定向导致 503 错误

强制浏览器忘记缓存的重定向?

宝塔的nginx开启强制https老是无限重定向

.htaccess - 尝试强制 https 时出现“重定向过多”