Travellers Tales http://travel-lab.info/tech/pblog/index.php Thu, 27 Sep 2007 00:54:22 +0900 Travellers Tales - RSS 2.0 (Really Simple Syndication). livedoor Reader lite の iPhone/iPod touch 用設定を読む http://travel-lab.info/tech/pblog/article.php?id=148 http://travel-lab.info/tech/pblog/article.php?id=148 Thu, 27 Sep 2007 00:54:22 +0900 iPhone および iPod touch 対応の livedoor Reader lite が発表されました1。 livedoor Reader lite 早速、Google の iPhone Search 設定に続き、live... 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 用したいところです。）

  1. livedoor Reader 開発日誌:iPhone/iPod touch対応の「livedoor Reader lite」 ↩

  2. Google の iPhone Search の iPhone 用設定を見る ↩

]]>