Onsen UI page orientation propriété pour le paysage et le portrait

Question

Je suis nouveau pour l'interface utilisateur Onsen. Je veux contrôler l'orientation de chaque page, comme une page ne fonctionne qu'en mode portrait, une autre pour le mode paysage et une autre pour les deux. Est-ce possible avec Onsen UI.

Answer 1

Si vous souhaitez afficher une page dans une orientation et une autre dans l'autre, cela est possible même si je ne le recommande pas. Habituellement en utilisant media queries pour changer les styles de la page elle-même est la méthode préférée. Toutefois, si vous devez faire alors que vous pouvez faire:

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

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

Voici les docs for ons-if.

Si vous utilisez Onsen 1, vous pouvez utiliser ons-if-orientation

Mise à jour: Le code ci-dessus fonctionne, mais je suppose que ce n'est pas ce que vous voulez. Il semble que ce que vous voulez ne soit pas d'afficher une page si l'orientation correspond, mais plutôt de forcer l'orientation basée sur la page si je comprends bien.

Si vous voulez forcer une orientation spécifique, je suis désolé de dire qu'Onsen ne fournit pas cette fonctionnalité pour le moment. link

Cordova offre quelques fonctionnalités comme celui-ci <preference name="orientation" value="portrait" /> dans le config.xml mais je pense que c'est pour l'application entière, non seulement pour une page spécifique. Il semble qu'il y ait un plugin qui est censé être capable de le faire sur une base par page. Il y a des normes à ce sujet encore en développement si je ne me trompe pas, mais peut-être qu'elles ne sont pas implémentées partout.

Je crois qu'il ya something comme <link rel="manifest" href="manifest.json"> que vous pouvez mettre dans votre code HTML, où le JSON contient {"orientation": "landscape"}, mais encore une fois je ne suis pas sûr que cela fonctionnera partout. Peut-être que cela ne fonctionnera que sur Android.

Une dernière chose que vous pourriez faire quelque chose comme

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

faisant cependant une rotation comme cela va probablement créer plus de problèmes et n'est pas recommandé.

Probablement le manifest.json pourrait être une solution pour android ou juste le plugin cordova sinon.