Ionic lab で 画面を横に固定して動作確認したい

Ionicを使って新しく作ろうとしているアプリを横画面にしたくて、config.xmlに次のタグを追加しました。

<preference name="Orientation" value="landscape" />

 

エミュレーターで動作確認をすると、きちんと画面が横向きになってくれるのですが、お手軽に「ionic lab」を使うとこんな画面になってしまいます。

 

 

横向きに表示したいのよーーーーってことで、色々調べてみました。

 

環境

Ionic:
ionic (Ionic CLI) : 4.1.2 (/Users/XXXXX/.nodebrew/node/v8.9.4/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.0

Cordova:
cordova (Cordova CLI) : 8.0.0
Cordova Platforms : ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.1.0, (and 4 other plugins)

System:
NodeJS : v8.9.4 (/Users/XXXXX/.nodebrew/node/v8.9.4/bin/node)
npm : 5.6.0
OS : macOS High Sierra
Xcode : Xcode 9.4.1 Build version 9F2000

Firefoxの場合

Firefoxは設定から変更できるようです。

 

You can change orientation in firefox via Tools > Web Developer > Responsive Design View

 

参考：https://forum.ionicframework.com/t/ionic-serve-lab-landscape-view/89924

 

私はFirefoxを持っていないので、どんな風に表示されているのかわからないのですが、質問のやりとりを見ていると、意図通りに表示されているみたいです。

 

Chromeの場合

画面の右上にある「Open fullscreen」をクリック

フルスクリーン画面が開いたら、chromeの右上にある点々マークから「その他のツール ＞ デベロッパーツール」をクリック

 

右ペインの上のほうにある、スマホやタブレットっぽい（？）アイコンをクリック

 

あとは表示された画面で、「Responsive」の項目からテストするデバイスを選んだり、スマホがくるくる回せそうな（？）アイコンから画面を回転させたりして、テスト用の画面を作ります。

 

 

自分で表示設定で横向きにしているので、果たして動作確認になっているのか疑問ですが、まぁ、手軽に表示確認をする手段としては使えそうです。