スマホの解像度と、screen.widthの値が違うのはなぜ？

Question

概要

メディアクエリでPCとスマホに適用されるCSSを切り替えようとしたのですが、想定とは違う結果になりました。

コード

<!-- 省略 -->
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css" media="screen and (max-width: 767px)">
<!-- 省略 -->

予想

スマホの解像度は、カタログスペックで1080*2340pxでしたので、style1.cssが適用されるだろう

結果

スマホでアクセスしたところ、
style2.cssが適用されたページが表示

実験

<script>
    document.write("screen.width: " + screen.width);
</script>

を付け足してから改めて表示すると、
screen.width: 384
と表示されました。

疑問

なぜカタログスペックでは、横幅が1080pxなのに対し、実際の幅は384pxと異なっているのだろう？

Answer 1

デバイスの物理的なピクセル数とブラウザやCSSが使う論理的なピクセル数が異なっている場合があります。

window.devicePixelRatioを確かめてみるといいかもしれません。

詳しくはこちらの解説をどうぞ。

いまさら聞けないRetina対応のための「ピクセル」の話 | Rriver