スマートフォン用のページ

blogに関して、スマートフォン用のページとPC用のページを作った。
.htaccessで切り替えているので例外を作らない場合はブラウザのUAで強制的に切り替わる。

スマートフォン版のトップページの下の方にあるPC版のボタンをタップすると、PC版のトップページに行く事が出来る。
ブラウザのURLを見れば分かるとおり、mode=pcを付加するとUAに優先して切り替える事が出来る。

スマートフォンでは通常は　www.fnf.jp/blog/i/　がトップページだ。
PC版のトップページである www.fnf.jp/blog/ と打ち込んだ所で、すぐにRewriteされてしまう。
しかし www.fnf.jp/blog/?mode=pc とやればPC版のページを見る事が出来る。
これはトップページだけでは無く個別ページでも有効だ。

使う事はあまりないとは思うのだが、この逆も出来る。
PCからのアクセスでは www.fnf.jp/blog/i/と打ち込んだ所で www.fnf.jp/blog/ にRewriteされてしまう。
しかし www.fnf.jp/blog/i/?mode=sp とやればPCからでもスマートフォン版のページを見る事が出来る。

RewriteでURLを切り替えるというのは意外と面倒なのだ。
blog内の要素の多くはリラティブURLで書かれているのだが、これが合致しなくなる。
www.fnf.jp/blog/i/がwww.fnf.jp/blog/にRewriteされた所でブラウザはwww.fnf.jp/blog/i/だと思っているわけだ。
なので、www.fnf.jp/blog/abc.jpgをロードしようとして img src=./abc.jpg とやっても駄目だ。
ブラウザとしてはwww.fnf.jp/blog/i/abc.jpgを探してNotFoundを返してくる。

気づいた所は直しているが、もしかすると×マークの付くアイコンなどがあるかも知れない。
スマートフォンでChromeブラウザを使い、ボタンをタップしてPC用のページに行くとスタイルシートが読み込めなかった風な、レイアウトの崩れた画面になる事がある。
現時点で何が起きているのか分かっていない。