【はてなブログPro】レスポンシブとスマートフォンとグローバルヘッダの関係

【はてなブログPro】レスポンシブとスマートフォンとグローバルヘッダの関係

はてなブログPro のオプションに「ヘッダとフッタ」の非表示というものがあります。

これですね。はてなユーザにはあると便利ですが、ユーザでなければジャマなものです。

で、自作テーマをレスポンシブで作ろうとしていましたら、モバイルの詳細設定の「レスポンシブデザイン」にチェックするしない、との関係が分かりにくいですね。

01「レスポンシブデザイン」チェックボックス

  • チェックなし
    UserAgent を読んで(
    詳しく調べていませんので多分)、スマートフォンの場合は、はてなオリジナルモバイルテーマに固定されます。必ずヘッダ&フッタがつきます。
    PC や UserAgent 指定のないタブレットなどは、指定テーマが有効になり、「ヘッダ&フッタ」オプションも有効になります。
  • チェックあり
    すべてのデバイスで指定テーマが有効になり、「ヘッダ&フッタ」オプションも有効になります。
    テーマに「 /* Responsive: yes */ 」のコメントを入れると、
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” / > が挿入され、デバイスの横幅に応じた表示になります。

ということのようです。

02スマートフォン用ヘッダ&フッタ

スマートフォン用にアイコン化されたヘッダがあるようです。

オリジナルモバイルテーマの場合は当然ですが、「レスポンシブデザイン」にチェックした場合でもスマートフォン用になります。

上が実機のキャプチャで、下がエミュレーターです。UserAgent を読んでいるということですね。