Nexus5XのCSSピクセルやデバイスピクセル比はいくつか?

ウェブサイトをスマホ対応化させる場合、「CSSピクセル」や「デバイスピクセル比」というのを考える必要があります。

スマホ表示で画面が横(左右)に動く現象の原因と直し方」のページで解説した通り、スマホ表示の際にディスプレイ上に表示されるページの横幅はそのデバイス(機種)ごとに設定されているCSSピクセルによって決まる。

例えばiPhone5のCSSピクセルは320ピクセル × 568ピクセルなので、スマホ表示の際の横幅は320ピクセルである。
横幅320ピクセル

そして、iPhone5のディスプレイの解像度は640ピクセル × 1136ピクセルである。
参考リンク:iPhone5の仕様 – Apple公式サイト

つまりiPhone5の場合、Webページの1ピクセルを表示するためにディスプレイの2ピクセルを使用することになるわけです。

Nexus5XのCSSピクセルはいくつ?

私が現在メイン機として使用している携帯はNexus5Xである。
この機種のCSSピクセルを知りたくてネット検索したのですが、的確に書かれているページが見つからなかったので、自分で確認してみました。

確認方法は簡単です。
このブログや自分のサイトにNexus5Xでアクセスをし、アクセス解析によって解像度を確認するのです。

私は自分の管理しているサイトに2種類のアクセス解析を設置しています。
その片方のアクセス解析での表示は以下。
アクセス解析での解像度表示
412 x 732となっています。

一応、念のためにGoogleアナリティクスのほうでも確認してみます。
Googleアナリティクスでの解像度
こちらでも同じく412×732となっています。

結論。
Nexus5XのCSSピクセルは412ピクセル x 732ピクセルです。
ディスプレイ解像度は1,080ピクセル x 1,920ピクセルなので、デバイスピクセル比は2.62となります。
参考リンク:Nexus5X仕様 – Google公式サイト

補足:現在最もシェアの高いiPhone6(s)とiPhone6(s) PlusのCSSピクセルは?

2016年8月現在の日本で最もシェアの高いスマホはiPhone6(s)またはiPhone6(s) Plusだと思われるので、スマホサイトを作る際にはまずそれらのCSSピクセルが基準になるでしょう。

iPhone6(s)のCSSピクセルは、375 x 667 ピクセル。
iPhone6(s) PlusのCSSピクセルは、414×736 ピクセル。

となります。
Nexus5XはiPhone6(s) Plusとだいたい同じということになりますね。