2007/09/27
livedoor Reader lite の iPhone/iPod touch 用設定を読む
iPhone および iPod touch 対応の livedoor Reader lite が発表されました1。
早速、Google の iPhone Search 設定に続き、livedoor Reader lite の設定も見てみました。
livedoor Reader lite の head 要素の iPhone/iPod touch 用設定
まず、head 要素部分。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<title>livedoor Reader lite</title>
<link rel="stylesheet" href="/css/lite.0.1.css">
</head>
meta 要素の viewport プロパティで
- 幅：320px
- 最初の拡大率：等倍
- 最大の拡大率：等倍
- ユーザが拡大縮小：不可
と設定しています。このあたりは、Google の iPhone Search2 も似た感じです。
※ なお、viewport の設定の区切りでセミコロンを使うのは望ましくありません。詳しくは「viewport 属性の区切りはセミコロンではなくカンマ」を参照。
livedoor Reader lite の スタイルシートの iPhone/iPod touch 用設定
次にスタイルシート：http://reader.livedoor.com/css/lite.0.1.css
特に （訂正：その後設定が変わったのか、それとも単に見落としていたのか、今現在 webkit-text-size-adjust のような iPhone/iPod touch 独特（というか WebKit 独特の？）のセレクタは使われていないようです。-webkit-text-size-adjust:none; が使われていることを確認しました。）
特徴を挙げるなら、
font-size: 20px;
として、フォントサイズを大きめに設定してあることでしょうか。特殊な設定をしているわけではないことがわかると思います。
Apple も iPhone の開発ノート（日本語訳）の中で Web 標準に従っていれば、iPhone への対応が容易である旨のことを述べています。
iPhone/iPod touch 用にウェブページをカスタマイズするのは、実は難しくないということですね。（iPhone/iPod touch 対応した MovableType インターフェイスも出たことですし、本ブログも iPhone/iPod touch 用したいところです。）
Comment
No Comments