デスクトップブラウザのスクロールバーの幅

レスポンシブデザインを実装するときはビューポートを考慮しますが、 ブラウザによっては、ビューポートにスクロールバーを考慮したりしなかったりします。

そこで簡単に実装するためにはスクロールバーの幅の分だけ余裕を持たせてデザインする必要があるのですが、 実際にはどれだけの幅を考慮すればよいのか分からないので、とりあえずデスクトップブラウザでチェックしました。

1920ディスプレイの Win8.1 デスクトップ機でスクリーンキャプチャから計測した値です。 スクロールバーの(両)横に 1px - 2px 程度の微妙な枠が含まれていて、どこまでがビューポートとして認識されているかわかりませんでした。 したがって幅はその分の誤差を持たせて表記しています。

IE はビューポートにスクロールバーを考慮しなかったと記憶していますが、バージョンの差もあるでしょうから念のため。

これに加えてスマートフォンなどを考慮する必要があるわけですが、それを込みにしても、スクロールバーは 20px 程度の幅を見ておけば良さそうです。