【はてなブログ】レスポンシブ対応でiPhone上の文字サイズが異様に小さいときの対応
本日、下記リンクの通り、ブログデザインをリニューアルしました。
ところが、自分が使っていたiPhone SEで表示すると文字サイズが異様に小さいという問題がありました（上記画像を参照）。
なので、原因を調査し、設定を修正しました。
どうしてこうなったか
このサイトではレスポンシブ対応のCSSを導入していました。
「レスポンシブWebデザイン」とは、PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを柔軟に調整することを指します。
（中略）
「レスポンシブWebデザイン」では、1つのHTMLファイルを、CSS3（Media Queries）で制御し、異なる画面サイズに応じてページのレイアウト・デザインを調整します。
このサイトのデザインの元であるCONTENTSでも、レスポンシブ対応のコードは公開されています。
ただし、レスポンシブ対応はCSSだけで完結することはできず、HTMLヘッダにも一部追加が必要だったようです。 今回はHTMLヘッダへの追記を忘れていて、結果として「iPhoneで記事を読むと文字が小さくなる」という現象になったようです。
（注意：このブログのCSSはオリジナルのCONTENTSよりもだいぶ書き換えたため、CONTENTS作者ではなく自分の不注意かもしれません。）
どうすればいいか（はてなブログ運営者向け）
（CSSではなく）HTMLヘッダに追記をします。はてなブログでは次のように設定します：
- ダッシュボードにアクセス
- 設定→詳細設定→検索エンジン最適化
- 「headに要素を追加」に次の1行を追加する
<meta name="viewport" content="width=device-width">
技術的な解説（難しいので、知りたい方のみお読みください）
レスポンシブ対応のためにCSSを使う場合は、基本的にMedia Queriesという仕組みを使います。
これは、デバイスの属性（幅(width)など）を元に、CSSの設定を場合分けするものです。
しかし、CSS上のピクセル値は物理的な画面のピクセル値とは異なります。 Apple製デバイスのRetina Displayのように「デバイスピクセル比」を考慮する必要があります。 具体的には、デバイスピクセル値は通常は「1」なのですが、Retina Displayでは「2」になっています。なので、そのままだと幅(width)の値が「2倍として解釈される」のです。
そこで、デバイスピクセル比を考慮した後のブラウザの表示領域のことをViewportというのですが、このViewportを適切に設定してやることで、「CSS上のピクセル値」だけでデバイスピクセル値の違うデバイスでも同じようにMedia Queriesを使えるようになります。
技術的な参考サイト
まとめ
レスポンシブ対応のはてなブログデザインを使っている際に、iPhone（Apple製デバイス）で文字が異様に小さく表示されてしまったときの解説でした。
本当は短信の続きとして「デザインを修正しました」と軽く書くつもりでしたが、誰かハマりそうな人もいそうな気がしたので、記事としてやや詳しめに書いてみました。
ちなみに、今回のリニューアルは自分が「Web技術を勉強する」というのが裏テーマで、そのため普通にやるよりもかなり時間と労力もかかってしまいました。ただ、収穫も大きいので、無駄では決して無かったと信じています……。
藤原 惟
