Onsen UI Seitenausrichtung Eigenschaft für Querformat und Hochformat

Question

Ich bin neu für Onsen UI. Ich möchte die Ausrichtung einzelner Seiten steuern, z. B. eine Seite nur im Hochformat, eine im Querformat und eine für beide Seiten. Ist dies mit Onsen UI möglich?

Answer 1

Wenn Sie möchten, dass eine Seite in einer Ausrichtung angezeigt wird und eine andere in der anderen, dann ist es möglich, obwohl ich sie nicht empfehlen würde. Normalerweise verwenden Sie media queries, um die Stile der Seite selbst zu ändern, ist die bevorzugte Methode. Allerdings, wenn Sie müssen tun es dann können Sie tun:

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

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

Hier sind die docs for ons-if.

Wenn Sie Onsen verwenden sind 1, dann können Sie verwenden ons-if-orientation

Update: Der obige Code funktioniert, aber ich denke, es ist nicht das, was Sie wollen. Es sieht so aus, als ob Sie nicht wollen, dass eine Seite angezeigt wird, wenn die Ausrichtung übereinstimmt, sondern dass die Ausrichtung basierend auf der Seite erzwungen wird, wenn ich das richtig verstehe.

Wenn Sie eine bestimmte Ausrichtung erzwingen möchten, tut es mir leid zu sagen, dass Onsen diese Funktionalität derzeit nicht bietet. link

Cordova bietet einige Features wie diese <preference name="orientation" value="portrait" /> im config.xml aber ich denke, dass für die ganze App ist nicht nur für eine bestimmte Seite. Es scheint, dass es eine plugin gibt, die in der Lage sein soll, es pro Seite zu tun. Es gibt Standards, die noch in Entwicklung sind, wenn ich mich nicht irre, aber vielleicht sind sie nicht überall implementiert.

Ich denke, es something wie <link rel="manifest" href="manifest.json"> ist, die Sie in Ihren HTML setzen könnte, wo die json {"orientation": "landscape"} enthält, aber auch hier bin ich nicht sicher, dass dies überall funktionieren. Vielleicht funktioniert es nur in Android.

Eine letzte, was Sie tun können, ist so etwas wie

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

jedoch eine Rotation wie das zu tun wird sich wahrscheinlich mehr Probleme schaffen und wird nicht empfohlen.

Wahrscheinlich könnte die manifest.json eine Lösung für Android oder einfach nur das Cordova-Plugin sein.