【備忘録】Chrome Developer Tools でスクリーンショットサイズがおかしくなる場合について

Google Chrome の Developer Tools は自由なサイズでスクリーンショットをとることができる優れたツールです。しかし保存したスクリーンショットのサイズが合わない場合があることにお気づきでしょうか。それは、各端末固有の「Device Pixel Ratio」が原因だったのです。それに気づいたので備忘録として残しておきます。

Developer Tools でスクリーンショットを撮る方法

まずはおさらいです。

1. スクリーンショットを撮りたいページを開く
2. 右クリックして「検証」を選択（表示メニュー > 開発 / 管理 > デベロッパーツール でもよい）
3. エミュレーションするサイズを設定（Responsive だと自由に設定できる）
   
4. 右端の縦三本の・をクリックし、Capture screenshot （画面に見えている範囲）あるいは Capture full size screenshot（ページ全体）を選択する
   

Responsive （400 x 600） でスクリーンショットしてみたら・・

※Capture full size screenshot の場合には、ページ全体なのでサイズはサイト設定によっても変わります。なので、試すのは、 Capture screenshot （画面に見えている範囲）のほうにします。

あれ、倍になってる（800 x 1200）！！

Device Pixel Ratio を設定してみよう！！

※これなにか知らなかったのですが、画像 1ピクセルを、実際の端末で何ピクセルで描写するかというレートということです。この数値が大きければ大きいほど、より繊細な表示ができるようになります。MacBookPro Retina Display は、2.0 になってます。

2.0ということは、容量の観点からいくと縦横各２倍の容量を使うということですね。

1. Developer tools のメニューある「Add device pixel ratio」を選択します。

2. すると、下図のように、DPR（Device Pixel Ratio）の設定が出てきます。

手持ちの MacBook Pro Retina Display は、2.0ですね。

3. デバイスサイズを選ぶか、Responsive にして自由にサイズを選ぶかして、DPR: 1.0 に設定します。

4. メニューより、Capture screenshot を選択して保存します。

おおー意図したサイズになったーーってな感じです。

2018年2月1日 @kimipooh