2014/3/28 - サイトをスマホでももうちょっとまともに見れるようにした話

こんにちわ。以前から、このサイトをスマホで見るとどうも見にくいと思っていた中の人です。もともとこのサイトは10年以上前から手を入れながら続けてきたためだいぶソースが汚くなっていたこともあって、スマホで見ることを最初から想定してレイアウトを作り直しました。


ライヴ歴など、一部のページでは横スクロールバーが出てしまいますが、ほとんどのページで横スクロールしないようになったと思っています。


ただ、これまでHTMLタグで表現していたレイアウトをCSSに任せた部分が多数あるため、古いブラウザではこちらの思うように表現されないこともあるかもしれませんが、アクセス状況を見ていると少数なので、そこまで対応しないことにしました。古い環境で閲覧してる方にはすみません。


PC向けレイアウトとモバイル向けレイアウトの切り替えポイントは幅750pxにしているので、一部のタブレットでは縦持ち（ポートレート）と横持ち（ランドスケープ）とでレイアウトが変わると思いますが、そこは、まあ、そんなもんだと思ってください。とりあえず僕はそんなもんだと思っています。


一応、手持ち端末で確認した結果を、自分のメモの意味も含めて以下にまとめておきます。

OS	端末	ブラウザ	結果	備考
Windows7		IE10	○
		IE9	○	IE10のブラウザモード変更で確認。
		IE8	○	IE10のブラウザモード変更で確認。 メディアクエリ非対応。
		IE7	○	IE10のブラウザモード変更で確認。 IE8以上と多少違うものの、問題ないレベル。 メディアクエリ非対応。
		Chrome	○	バージョンは33.0.1750.154 m
		Firefox	○	バージョンは27.0.1
		Safari	○	バージョンは5.1.7
Android2.3.4	Xperia arc (SO-01C)	標準ブラウザ	△	PCモードになってしまう。 device-widthを正常に取得できてない様子
Android3.1	Optimus Pad (L-06C)	標準ブラウザ	○	縦横ともPC表示。
Android4.1.2	Xperia A (SO-04E)	標準ブラウザ	○
		Chrome	○	バージョンは33.0.1750.136
		Dolphin Browser	○	バージョンは9.4.1
Android4.3	Nexus 7 (2012)	Chrome	○	縦だとモバイル表示、横だとPC表示。
iOS 6.1.2	iPod touch (第4世代)	Safari	○

Xperia arcの挙動がおかしいのが解せませんが、Android2.xだと画面幅の取り方に違いがあるのかなぁと勝手に思っています。まあ、PC用レイアウトではありますがとにかく見れているので、とりあえずよしとします。該当する方には見にくくてすみませんが、拡大して見てください。


IE6はチェックしてない（もうできない）ですが、IE10のQuirksモードで見たら多少レイアウトが崩れるものの、見れないというほどではありませんでした。でもさすがにもうIE6は切り捨てますので、レイアウト崩れには特に何も対処しません。っていうかまだIE6使ってるとか自殺行為ですよね。


iOS系は、うちにあるApple製品は古いiPod touchしかないので、それでしかチェックできていません。でもそれで見れるってことは今の端末ならきっと大丈夫だと思います。きっと。


これ以外のマイナーブラウザ（OperaとかNetscapeとか）はチェックしてないですけど、見れないってことはないんじゃないですかね。たぶんですが。


引き続き、利用者の皆様にとって使いやすいサイトを目指してまいりたいと考えております。今後とも弊サイトをどうぞよろしくお願いいたします。（定型文）