taka8aru: iOS 4/iPhone 4/iPod touch 4Gの行間・改行幅・表示情報量問題にブックマークレットで対策



iOS 3（左）とiOS 4 Retina Display（右）での同一サイトの表示例。Google Readerの表示が6行に対して５行しかない

iOS 4の問題なのかRetina Displayの問題なのか切り分けができていませんが、少なくとも私の手元にある、iOS 3.1.2 iPod touch 1GでのSafariの表示情報量に比べて、iOS 4.2.1 iPod touch 4G (Retina Display) の表示情報量は1割ほど少ないことがあるのです。

どういうことかと言いますと、右の画面キャプチャのように、iPod touch 4GのSafariでGoogle ReaderやYahoo Japanニュースを表示すると、行間・改行幅が1Gに比べて不自然に間延びして広くなってしまい、結果として表示行数が少なくなってしまいます（以前の記事：iOS 4の表示情報量が少ない問題）。

一画面に表示できる表示情報量がかなり違うのがわかると思います。

なお、Appleのページなど、ページ側で改行幅を明示的に指定しているような場合は同じ表示になり、問題は発生しません。

Google ReaderやYahooがiOS 4用に特別な改行指定をしているのかとも思ってみましたが、仮定としてちょっと不自然です。

HiraginoフォントやHelveticaフォントをiOS 3から持ってきて上書きしてみたりしましたが、全く効果がありません。

搭載フォントの問題ではないとすると、Cocoa TouchやCore ServiceなどiOSレイヤがRetina Displayに十分対応できていない非互換問題になるのかもしれません。

なんとか回避策がないものかとiPod touch 4G入手以来（2010年9月、上海から出荷されるのを1週間以上待ちましたね）ずっと悩んできたのですが、やっとたどり着けました。

できてみれば、何のことはない、~~scriptlet~~ bookmarkletでline-heightを上書き指定するだけなのですが、見やすさというか、安心感というか、お得感が全然違います（たった1割の差なのに）。

以下、設定方法です。

方法1. Mac/PCから同期：

Mac/PCで、このリンク「より狭く表示」「より広く表示」をブックマークバーにドラッグ＆ドロップして、ブックマークを作成します。
iTunesでSafariのブックマークを同期して、iPhone/iPod touchに転送します。

改行幅の広さが気になるページをiPhone/iPod touchで表示しているときに、ブックマークから [より狭く表示] を選ぶと、改行幅が以前と同じになるように修正されます。

方法2. iPhone/iPod touchで~~scriptletブックマーク~~ ブックマークレットを直接作成：

iPhone/iPod touchで[より狭く表示] のための以下のスクリプトを選択し、コピーしておきます。
- javascript:if(document.body.style.lineHeight==''){document.body.style.lineHeight=1.16;}else{document.body.style.lineHeight*=0.909;}
適当なページを表示している最中に、[送信] メニュー（下のコマンドバー真ん中の、箱から矢印が右に飛び出ているアイコンボタン(ちなみにiOS 3では＋記号でした)）を押し、[ブックマークを追加] を選ぶ。
ブックマーク名を「より狭く表示」に書き換えて、保存。
[ブックマーク] メニュー（下のコマンドバーの、本のアイコンボタン）から、[編集] メニュー選び、先ほど作成した [より狭く表示] を選ぶ。
リンク先が編集できる状態になるので、全選択した上で、最初にコピーした文字列をペーストし、上書きする。
ブックマーク一覧に戻り、[完了] を押す。
以上で設定完了。
なお、[より広く表示] のスクリプトは以下です。
- javascript:if(document.body.style.lineHeight==''){document.body.style.lineHeight=1.276;}else{document.body.style.lineHeight*=1.1;}


iOS 3での表示。6行表示される	[より狭く表示] の効果。6行表示回復に成功	[より狭く表示] の2回押し。7行表示

この、[より狭く表示] を使用したときの表示例を載せておきます。

[より狭く表示] を複数回実行することで、さらに狭く表示することもできます。

どうでしょうか、画面キャプチャだけではそれほどの差を感じないかもしれませんが、私はずっとこの不自然さに気持ち悪さを感じていました。

ユーザーインターフェースは、少しの違いが大きな感覚の違いを生む一例だと思いました。

[2011-03-25] iOS4のiPhone 3GSで切り分け調査を行いました。

Retina DisplayではないiPhone 3GSの行間表示とiPod touch 4Gの表示は全く同じでした。

結果、Retina Displayであるなしに関わらず、iOS 4 で行間が広がる問題が発生していることがわかりました。
[2012-01-15] iOS 5 でも全く同じ、この~~スクリプトレット~~ブックマークレットは必要な状況は続いています。
[2012-04-03] スクリプトレットではなくてブックマークレットなので、タイトル等を修正しました。