このページの目的

1つのHTMLファイルで各メディアに対応したページを作ってみようと思いまして。

PCとスマホ向けはリキッドレイアウトでなんとかなりそうだなぁと思ったんですが、CGIが使えない環境で、既存の各携帯でも見れるページを作るにはどうしたらいいかな?と実験しています。

CGIが使えない前提で設定していますので、JavaScriptとCSSで実現しています

このページのポイント

HTML内に記述した携帯用CSSへのLinkを、ブラウザ幅に合わせてPC用/タブレット用/スマホ用に変更。

携帯用ユーザエージェントを返す場合は携帯用CSSのままになるようにしています。

一部携帯はJavascript機能がoffになっているので、scriptの記述が削除された状態で閲覧される、という仕組み。

画像について

ある程度CSSが理解出来る携帯用ブラウザの場合は、ある程度のサイズの画像を読み込めるようなので、画像については特に何もしていません。
以下の星の画像はimgタグで、月の画像はCSSで表示させています(携帯の場合は[画像]というリンクになっています)

[画像]

画像へのリンクなどをJSが動いているブラウザでは表示、みたいなものも組んでみたいですね。