以前練習用に作ったホームページ。
主に独自ドメインとサバー管理、cssによるレイアウト管理の練習用。
初歩的な機能しか使っていないけれど、タグ手打ちで形は出来た。
ここ最近はブログと違って誰も見ないのを良い事に長々と愚痴半分の
文章を書いてみたりしてみたり。
しかしこうなってくると欲が湧くもので、最近の商用サイトでありがちな
スマートフォン対応をやってみたい。
ブログ部分はワードプレスなのでプラグインで対応済みなんだけれど、
HP本体はどうしたものか。
調べたてみたら、ブラウザで画面解像度を読み取り画面レイアウトを
切り替えることが出来るとのこと。iPhone4は960×640ピクセルという
無茶な解像度なんだけれど、スマートフォンは480×320ピクセルが
とりあえず標準っぽい。iPhoneも内部で拡大表示してくれるらしい。
HTMLのヘッダー部分に
<link href="css/pc.css" rel="stylesheet" type="text/css" media="screen and (min-device-width: 481px)">
<link href="css/iphone.css" rel="stylesheet" type= "text/css" media="only screen and (max-device-width: 480px)">
と指定しておけば解像度480を境にcssを読み分けてくれる。
後はiPhone向けにcssを用意すれば完成。意外に簡単だった。
試せないので分からないけれどおそらくアンドロイドでも見られるはず。
まあ、練習用なのでコンテンツがないから誰も見ないんだけれどね。