Webページの場合

スマホとPCで表示場所を変える

機種を識別してPCにはメインコンテンツとサイドバーを。スマホにはメインコンテンツの上方か下方にサイドバーに表示する内容を。といった内容は同じで表示する場所を変更する方法

横向きに利用するタブレットやスマホではPCと同様にメインコンテンツの横などにサイドバーを表示させてほしい場合もある。

（一時的にしても）現在横長のディスプレイを利用しているのか、縦長のディスプレイを利用しているのかでコンテンツの表示場所を変更する方法。

横のpxが一定値以上であればサイドバーを表示する。短手（横長である場合縦、縦長である場合横）のpxに応じたフォントサイズにする。

dpiがわかればもう少しやりようがあるんだと思うんですが・・・。ここまでだらだらと考えておいて、結局見る人がどう思うかというのがでかいような気もしますね。

スマホ用サイトとPC用サイトのリンクを常に表示して、ユーザーに任せる。
サイトが複数になる以上手間はかかりますが、ユーザーサイドとして考えるとこれが一番融通が利く感じはします。

想定外の環境というのは思ったより多くあるので。

HTML5の描画機能を利用したゲームなどを提供する場合。これに対応しようと思うと、やはりサイトを複数作るのが良さそう。そもそも操作方法の吸収もしなくてはいけないですし。

考え方はゲーム画面のサイズにもよりますが、

PCにおいては、
ウィンドウサイズが変更されたときにウィンドウサイズに追従してほしい。
スマホにおいては、
横長なのか縦長なのかの判定、画面回転時はどう対応するか？

といった点に着目して条件分岐する必要がありそうです。

PCの時は単純にwindow.onresizeプロパティに、ウィンドウサイズに追従するようなイベントを渡してやれば良さそうです。

スマホ時はまず仕様を決めなければなりません。
想定していない向きでもその中で表示させるようにするのか？あるいは想定している向きでしかプレイさせないのか？画面回転時にのみアラートを出して戻すようにしてもらうのか？

考えたら手段は色々ありそうですが、ここで一つ思いついたのが、

画面の回転に合わせて想定の方向になるようにゲーム画面も回転させてみよう。
ということでサンプルを作ってみました。動くかな？

ちょっとうまく動作しないので、修正中です。
動作安定までしばらくお待ちください。

上記修正した記事はこちら。

御覧いただきありがとうございました。