manifest.json 的方向属性不起作用答案

【问题标题】：Orientation property of manifest.json is not workingmanifest.json 的方向属性不起作用
【发布时间】：2017-05-30 13:30:23
【问题描述】：

这是我的 manifest.json

{
  "name": "XXXXX",
  "short_name": "XXXXX",
  "start_url": "/",
  "gcm_sender_id": "XXX",
  "background_color": "#dfdfdf",
  "display": "standalone",
  "orientation": "landscape",
  "icons": [
    {
      "src": "\/icons\/android-chrome-128x128.png",
      "sizes": "128x128",
      "type": "image\/png"
    },
    {
      "src": "\/icons\/android-chrome-144x144.png",
      "sizes": "144x144",
      "type": "image\/png"
    },
    {
      "src": "\/icons\/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image\/png"
    },
    {
      "src": "\/icons\/android-chrome-256x256.png",
      "sizes": "256x256",
      "type": "image\/png"
    }
  ]
}

此网络应用程序应始终处于横向模式，但它以纵向模式打开。

这里有一个question 有同样的问题，但没有一个答案能解决我的问题

【问题讨论】：

如果你使用你的 start_url 到 "start_url": "/index.html" 会发生什么？
可能重复：stackoverflow.com/questions/43494388/…
@noogui 我试过你的建议，但也没有用。我的网络应用仍然以纵向模式打开 :(
@KevinFarrugia 是的，问题是一样的，但我没有找到任何解决方案。
Chrome 版本 58.0.3029.83。我没有在金丝雀上尝试过，因为最终用户只会使用 chrome，所以我必须只修复 chrome。它在四月之前工作正常，但四月之后我遇到了问题。

标签： progressive-web-apps manifest.json

【解决方案1】：

我刚刚在sample app 上尝试了"orientation": "landscape"，它似乎工作正常。您可以查看示例代码here

根据您的描述，当时失败的原因有两种。首先，可能是 Chrome 中的一个错误阻止了这种情况的发生。其次，在清单的 icons 属性中转义正斜杠可能会导致解析清单时出现问题。

例如，你的图标属性应该是：

"orientation": "landscape",
"icons": [
  {
    "src": "/icons/android-chrome-128x128.png",
    "sizes": "128x128",
    "type": "image/png"
  },
  {
    "src": "/icons/android-chrome-144x144.png",
    "sizes": "144x144",
    "type": "image/png"
  },
  {
    "src": "/icons/android-chrome-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "/icons/android-chrome-256x256.png",
    "sizes": "256x256",
    "type": "image/png"
  }
]

【讨论】：

我注意到，当您转到 Chrome Mobile 中的菜单时，该应用程序为您提供了安装它的选项...我的应用程序只为您提供了“添加到主屏幕”的选项。这应该有什么不同吗？我的清单没有图标、颜色、快捷方式或共享目标标签，但我不明白为什么我只需要它们才能让横向模式工作
好吧，这很奇怪。我从 Chrome 87 更新到 89 并重新添加到主页，现在它显示横向，但我仍然无法摆脱顶部的巨大标题栏，即使我正在使用 display:standalone