YusukeSugomori

iPhoneのネイティブアプリでは画面方向を縦あるいは横方向に固定できますが、Safariでは、画面の回転を防ぐ方法がありません（注１）。
そのためかは分かりませんが、PCではよく見かける横スクロールのサイトを、モバイルでは見かけません。

そこで、iPhoneの向きによらず、「絶対に横向きになるウェブページ」を作ってみました。横スクロールができるようになっています。
サンプルはこちらです。iPhoneの向きを変えて試してみてください。
画面の向きによらずスクロールを実現するために、CSS3の -webkit-transform の rotate や translate3d(x, 0, 0) を使っています。
回転によってCSSファイルを分けることによりスクロール以外の動きをCSS3のみで記述することも可能ですが、振り分けが面倒だったので、JavaScriptでCSS部分も制御しています。

参考のために、ソースを下に載せます。CoffeeScript、Slim、Lessの順番で掲載します。

特筆すべきは、

• 画面の向きによってウインドウの幅や高さが変わるため、取得し直す必要がある
• 画面が縦向き（Portrait）のとき、-webkit-transform-origin の値を画面幅の半分にすることで、回転の中心をあわせる
• スクロールは、touchstart, touchmove, touchend でタッチ位置の座標を取得して制御する（注２）

また、サンプルページでは画像をフルサイズで使いたかったため、.full-imageを使ってsetFullImg関数を用いていますが、普通の横スクロールページを作りたい場合、.view を並べていくだけで大丈夫です。 setView の関数で position: absolute; の設置する場所を指定しています。

Facebookがネイティブアプリで脱HTML5をしてしまったために、モバイルサイトの動きが鈍化してしまうのではないかと恐れていますが、今回のようなTipsがウェブの発展に少しでも貢献できれば幸いです。

*注１ 今のところ、$(window).on(‘orientationchange’, function(e){e.preventDefault();})で制御はできない。iPhone自体の傾きをロックする方法はある。

*注２ 以前に書いた記事（position: fixedもmetaタグも使わずにiPhone用ウェブサイトをアプリっぽく見せる（twitterっぽく））で用いたスクロールの制御方法より、今回の方がロジックがきれいなので、近々そちらも書き直すかもしれません。

9/22 追記
改）position: fixedもmetaタグも使わずにiPhone用ウェブサイトをアプリっぽく見せる（twitterっぽく）にて、 書き直しました。