携帯端末への配慮

宮沢賢治「風の又三郎」は,著者没後50年以上経ているので著作権が消滅しており,ボランティアが入力したものが青空文庫に収録されています。その冒頭部分をそのままHTML5にしたものをiPhone 5c(iOS 7)のSafariで表示すると次のようになります(Retinaディスプレイなので解像度を半分にして保存しました):

宮沢賢治「風の又三郎」冒頭部分,width指定なし

字を大きくするために画面を拡大すると,左右にスクロールしないと読めなくなり,不便です。

「リーダー」(アドレスバー左のボタン)をクリックすると読みやすくなります。この場合,リーダーで表示させたい部分を <article> ... </article> で囲っておきます。

そこで,次の1行を追加してみました:

<meta name="viewport" content="width=device-width">

結果は次のように読みやすくなります:

宮沢賢治「風の又三郎」冒頭部分,width指定あり

Androidのデフォルトのブラウザでもほぼ同じ振舞いになります。ただ,私の古いAndroid 2.2のブラウザでは,ルビ(ふりがな)が正常に表示できませんでした。

なお,横幅何ピクセルという具合にパソコンの幅に合わせてデザインしたページでは,上の meta タグを使うとかえって不便になります。

スマホの画面幅より広い画像も厄介です。簡単な方法は,CSSに

img {
  max-width: 100%;
  height: auto;
}

のように指定して,画像を自動縮小可能にすることです。

切れるところのない長い単語も厄介です。改行可能な点にUnicodeのU+200B ZERO WIDTH SPACE(HTMLでは &#8203; と書ける)を入れておくとよいでしょう。

スマホでは電話番号(に似たもの)やメアド(に似たもの)が自動的にリンクになってしまうことがあります。これを避けるには,次のように書いておきます。

<meta name="format-detection" content="telephone=no,email=no">

本当にリンクしたい電話番号は <a href="tel:08012345678"> でできます。


Last modified: