LandScapeとPortrait
スマートフォンは横向きでも縦向きでも使えるデバイスです。横向き（LandScape）でも縦向き（portrait）でも使えます。
Ionicはレスポンシブウェブデザインに対応しているので、縦でも横でも自動で最適な長さに調整してくれます。
Ionicに限らず、jQuery MobileやOnsen Uiでもレスポンシブウェブデザインに対応しています。
横向きのときは2カラムのレイアウトに切り替える
通常は、このレスポンシブウェブデザインに任せっきりで大丈夫なのですが、横向きで使用するときは２列レイアウト（Multi Column）にしたいときもありますよね。
Ionicのレスポンシブウェブデザインは、横向きにしてもただ単純に間延びするだけで、レイアウトは変わりません。横に伸びるのでスカスカでむしろかっこ悪い。
特にタブレットみたいに大型のディスプレイは、その寂しさが目立ちます。
では、横向きにしたとき、自動でレイアウトを2カラムに切り替える方法についてですが、これについてはCSSを使うことで実現できるようです。
縦？横？自動切り替えのイメージ
こんな感じにしてみましょう。横向きのときは2カラムになっているのがわかりますね。
国旗クイズの作成途中イメージです。画像に正解はありません。
実装コーディング
HTMLのマークアップ
<!-- 前略 -->
<body ng-app="starter" ng-controller="mainCtrl">
<ion-nav-view></ion-nav-view>
<script id="home.html" type="text/ng-template">
<ion-header-bar class="bar-dark">
<!-- タイマーや点数を書く場所。略 -->
</ion-header-bar>
<ion-content>
<div class="leftContent">
<div> </div>
<img class="full-image" ng-src="img/i147.png">
</div>
<div class="rightContent">
<div ng-repeat="n in ans | orderBy:'qid'">
<a class="button button-block button-dark" ng-disabled="n.isDisabled" ng-click="judgement(n);">{{n.val}}</a>
</div>
</div>
</ion-content>
</script>
</body>
Angular JSというよりCSSがキモです。ポイントはClassの部分です（leftContentクラスとrightContentクラス）
.leftContent{
width:50%;
float:left;
}
.rightContent{
margin-top:5%;
width:49%;
float:right;
}
これで回り込みます。
デバイスが縦か横かでスタイルを動的に書き換えます。CSSのみで完結できます。
/* 横向きレイアウト */
@media only screen and (orientation:landscape) {
}
/* 縦向きレイアウト */
@media only screen and (orientation:portrait) {
.leftContent{
width:100%;
float:none;
}
.rightContent{
width:100%;
float:none;
}
}
デバイスが縦向きになった時、
@media only screen and (orientation:portrait) { }
の中に書かれた内容に書き換わります。
ホームページでよくあるレスポンシブウェブデザインみたいな感じですね。縦向き、横向きで切り替える方法があったのは初めて知りました。
画面回転イベントを検知
ちなみに、画面回転のイベントをAngular JSで取得するには次のように書きます
/* ホーム画面 */
.controller('homeCtrl', function($scope) {
window.addEventListener("orientationchange", function() {
/* 回転すると呼び出される。 */
console.log(window.orientation);
alert("画面がまわった！！！ ");
}, false);
})
window.orientationには 0か90のどちらかが入るようです。
なので
if(window.orientation == 90){
}
みたいな感じで、処理をすることもできそうですね。
マルチカラムの切替程度であればCSSだけで完結できるので、あえてやる必要もありませんね。
