Google モバイルフレンドリーテストでPC画面が表示される

Google モバイルフレンドリーテストでPC画面が表示される現象について紹介します。

現象

モバイル用のページを作成し、スマートフォンではただし区表示できるにもかかわらず、Google モバイルフレンドリーテストではPCの画面が表示され、モバイルフレンドリーテストでエラーが発生します。

原因

iPhoneの場合、iPhone6(S)では縦向きの場合の横幅の実質解像度は、375pxになります。iPhone6(S) Plusの場合は、414pxとなります。また、Androidではほとんどの端末で、縦向きの場合の横幅の実質解像度は360pxとなります。

Google モバイルフレンドリーテストでのユーザーエージェントは下記が利用されます。

ユーザーエージェント

Nexus 5Xの縦向きの場合の横幅の実質解像度は410pxであり、通常のAndroidの実質解像度より広くなっています。そのため、CSSのメディアクエリーでスマートフォンに対応する画面を作成した場合に、380px や 400px でデザインが切り替わるよう作成すると、大半のAndroid端末では問題ありませんが、iPhone6(S) Plus や Nexus 5X ではPCの画面が表示されることとなります。Google モバイルフレンドリーテストでもNexus 5X のユーザーエージェントが使われるため、PCの画面が表示され、モバイルフレンドリーテストに失敗する結果になります。

対処法

対処法1:完全なレスポンシブページにする

どのような画面幅であっても横スクロールバーが表示されない、完全なレスポンシブページにする方法で対処できます。

対処法2:メディアクエリーでの切り替え解像度を 420px程度にする

iPhone6(S) Plusの場合は、414pxが実質解像度、Nexus 5Xでは410pxが実質解像度となるため、420px以下でスマートフォンの表示画面に切り替える動作にすることで、Google モバイルフレンドリーテストでもスマートフォンの画面表示となり対処できます。

著者

neg

iPentec.com の代表。ハードウェア、サーバー投資、管理などを担当。
Office 365やデータベースの記事なども担当。