Ориентация на страницу ориентации в Onsen для пейзажа и портрета

Question

Я новичок в интерфейсе Onsen. Я хочу контролировать индивидуальную ориентацию страницы, так как одна страница работает только в портретном режиме, одна для ландшафтного режима и одна для обоих. Возможно ли это с пользовательским интерфейсом Onsen.

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

Update: Приведенный выше код работает, но я предполагаю, что это не то, что вы хотите. Кажется, что вы хотите не отображать страницу, если ориентация совпадает, а скорее, чтобы заставить ориентацию на основе страницы, если я правильно понимаю.

Если вы хотите установить определенную ориентацию, то, к сожалению, Onsen не предоставляет эту функциональность в настоящее время. link

Кордова предоставляет некоторые функции, как этот <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 может быть решением для андроида или только плагина cordova в противном случае.