« Pocket詳解 Perl/CGI辞典 | メイン | Firefox 3.0 »
2008年6月17日
ケータイサイト構築 その２
12日の日記のその後です。なんとかiPhone/iPod touchのSafariに対応することができました。
ざっと情報収集してみたところ、どうやらiPhoneのSafariはページの横幅が980ピクセルであると仮定してレンダリングし、それを液晶のサイズに合わせて縮小して表示しているようです。この考え方はPC用の大きなページでは有効ですが、もともと小さい画面をターゲットに設計したページではほとんど無意味ですね。
これを防ぐには、HTMLの<head> 〜 </head>タグ内に、以下のような<meta>タグを追加して、横幅の値を指定してやれば良いようです。
ケータイ向けにレイアウトしたページにとりあえずこれだけでも付けておけば、少なくとも文字が異常に小さくなってしまう問題は回避できると思います。このタグが他の端末に影響を与えるのかどうか（このタグがiPhone専用なのかどうか）はまだ分かりませんが、暇を見つけてアップルのドキュメントを読んでみたいと思います。
なんだか思ったよりずっと簡単で、ちょっと肩透かしでした(^^;) 最初はUser-Agentを調べてプログラムで切り替えとか、いろいろ考えちゃったよ（笑）
関連リンク
・ケータイサイト構築 その３ (2008年06月25日)
コメント
おお、これは簡単でいいですね！って事で、Bookmarkletを作ってみました。
javascript:{
var head=document.getElementsByTagName("head")[0];
var meta=document.createElement("meta");
meta.setAttribute("name", "viewport");
meta.setAttribute("content", "width=320;");
head.appendChild(meta);
}
これで、viewportが無いページに無理矢理viewportを設定できます(笑
投稿者 kyaco : 2008年6月19日 00:39
おお、そんなことができるんですね。素晴らしい。
ここでひっそりと公開されているだけなのはもったいないですよ。ちゃんとページを作って、もっと簡単にiPhoneのブックマークに登録できるようにリンクを付けたいですね。試しに<a>タグ付けてみたんだけど、うまくいかなかったんですが、これってどう書けば良いんでしょう。
ちなみに、うちのPC用ページもこれで横幅を設定するとかなり見やすくなりますね。こっちも<meta>タグつけておいたほうが良いかな。
投稿者 浅利 : 2008年6月19日 01:20
ブックマークへの登録はリンクをPC上でドラッグ&ドロップしてやってもらうくらいしかわからないです(>0){return;}
var M=document.createElement('meta');
M.setAttribute('name','viewport');
M.setAttribute('content','width=320;');
document.getElementsByTagName('head')[0].appendChild(M);
}
)()
を使ってください。
多少行儀よくしました。
投稿者 kyaco : 2008年6月19日 04:32
javascriptがコメントだと化けてしまうみたいなので
http://www.uehara.gr.jp/testdata/bookmarklet_test.txt
に置いておきました。
他にも置くなら、文字化けするページのエンコーディングを書き換えるのとかあると喜ばれるかも?
投稿者 kyaco : 2008年6月19日 04:41
ありがとうございます。やってみたのですが、Safariだとどうしても右クリックでブックマークに登録するメニューが出ないんですよね。FirefoxだとOKなんですが・・・。Safariでもできているサイトもあるので、あとで何が違うのかよく調べてみたいと思います。
ただ、仮にSafariでできたとしても、iPhoneではリンクを直接ブックマークすることができないんですよね。よく考えてみると、あんまり意味ないかな(^^;)
やっぱケータイブラウザの開発でしょうか（笑）
投稿者 浅利 : 2008年6月19日 16:11
よろしければコメントしてください。
※メールアドレス以外の項目はこのページ上に公開されます。個人情報などの入力にはご注意ください。