Question

我是Onsen UI的新手。我想控制单个页面方向，例如一个页面仅在纵向模式下工作，彼此用于横向模式，一个用于两者。 Onsen UI是否可行。

Answer 1

如果你想让一个页面以一个方向显示而另一个页面显示在另一个方向上，那么即使我不推荐它也是可能的。通常使用media queries来更改页面本身的样式是首选方法。但是，如果你必须这样做，那么你可以这样做：

<ons-if orientation="landscape">
  <ons-page>Landscape page</ons-page>
</ons-if>

<ons-if orientation="portrait">
  <ons-page>Portrait page</ons-page>
</ons-if>

以下是docs for ons-if。

如果你正在使用Onsen 1，那么你可以使用ons-if-orientation

<强>更新上面的代码确实有效，但我想这不是你想要的。看起来你想要的是如果方向匹配则不显示页面，而是如果我理解正确的话，强制基于页面的方向。

如果您想强制使用特定方向，那么我很遗憾地说Onsen目前不提供该功能。 link

Cordova提供了类似的功能 <preference name="orientation" value="portrait" />中config.xml，但我认为这适用于整个应用，不仅适用于特定网页。似乎有一个plugin应该能够在每页的基础上完成它。如果我没有弄错的话，有关于此的标准仍在制定中，但也许它们并未在任何地方实施。

我想有something喜欢 <link rel="manifest" href="manifest.json">你可以把它放在你的HTML中，其中json包含{"orientation": "landscape"}，但我再也不确定它是否适用于所有地方。也许它只适用于Android。

你能做的最后一件事就是

@media only screen and (orientation:portrait){
    body { transform: rotate(90deg) }
}

然而，像这样做轮换可能会产生更多问题，不建议这样做。

manifest.json可能是android的解决方案，或者只是cordova插件的解决方案。

横向UI页面方向属性为横向和纵向

1 个答案: