bloggerのモバイルテンプレート機能がレスポンシブ・デザインに合うかについて調べました。
公式な情報はうまく見つけられませんでしたが、ブラウザのユーザ・エージェントでPC / モバイルのどちらのテンプレートを利用するかを決めているようです。
Safari ブラウザのデフォルトのユーザ・エージェントでアクセスした場合、次のように表示されました。
次にSafariのユーザ・エージェントを「Safari iOS 5.1 – iPhone」に変更してアクセスすると、次のように表示されました。
モバイルテンプレートを適用する場合は、URLに「?m=1」という文字列が自動的に追加されました。また、URLに「?m=1」をつけたままSafariのデフォルトのユーザ・エージェントに切り替えても、モバイルテンプレートが適用されました。iPadのユーザ・エージェントでは、モバイルテンプレートは適用されず、PCのテンプレートが適用されました。
結論は、表示画面の幅に応じて、デザインを切り替えるレスポンシブ・デザインでは、ユーザ・エージェントによってテンプレートを切り替える方法は適切ではないため、今回、モバイルテンプレート機能はオフにしました。
Safariでユーザ・エージェントを切り替える方法
- 「開発」メニュー > 「ユーザエージェント」から、切り替えたいユーザ・エージェントを選択
- 「開発」メニューが表示されない場合、「Safari」メニュー > 「環境設定」を開き、「詳細」タブで「メニューバーに”開発”メニューを表示」にチェックが入っていることを確認
モバイルテンプレートを無効にする方法
- bloggerのメニューにある「テンプレート」タブを選択し、表示される画面にある歯車マークを選択して、「いいえ。携帯端末でPCテンプレートを表示する」を選択