MacBook、Dell XPS、ThinkPad等のノートPCビューポートサイズ

ノートPCビューポートリファレンス

ノートPCは主要な開発・生産性プラットフォームであり、そのビューポートサイズはWebデザインにとって非常に重要です。最新のノートPCは、1366x768のバジェットChromebookから、1728x1117の高解像度MacBook Proまで幅広い範囲にわたります。

一般的なノートPCビューポート

デバイス	CSS幅	CSS高さ	DPR
Chromebook（標準）	1366px	768px	1x
MacBook Air 13" (M1/M2)	1440px	900px	2x
ThinkPad X1 Carbon	1920px	1200px	1.25x
Surface Laptop 5	1504px	1004px	1.5x
MacBook Pro 14" (M3)	1512px	982px	2x
Dell XPS 15	1920px	1200px	1.5x
MacBook Pro 16" (M3)	1728px	1117px	2x

1440pxスイートスポット

ビューポート幅1440pxは、標準的なデスクトップデザインターゲットとしてよく考えられています。MacBook Airモデルはまさにこの幅を使用しており、中央揃えコンテンツコンテナの最も一般的な「max-width」でもあります。1440px向けにデザインし、それ以下にブレークポイントを追加することで、ほとんどのノートPCで良好な体験を確保できます。

スケーリングと実効解像度

多くのWindowsノートPCはディスプレイスケーリングが125%または150%に設定された状態で出荷されます。これにより実効CSSビューポートが縮小されます。150%スケーリングの1920x1200ノートPCのCSSビューポートは約1280x800です。ネイティブ解像度が示すよりも少ないCSSピクセルをユーザーが見ていることを意味します。常に現実的なスケーリング設定でテストしてください。

ブラウザクローム

実際のビューポート高さは、ブラウザのアドレスバー、タブバー、ブックマークバーが垂直スペースを消費するため、ディスプレイ高さよりも小さくなります。900pxのディスプレイ高さでは、ビューポートは750-800px程度になる可能性があります。正確なビューポート高さに依存するレイアウトの設計は避けてください。