(注意) 記事を引っ越しました
- 引っ越し先 URL
デスクトップブラウザのスクロールバーの幅
レスポンシブデザインを実装するときはビューポートを考慮しますが、ブラウザによっては、ビューポートにスクロールバーを考慮したりしなかったりします。
そこで簡単に実装するためにはスクロールバーの幅の分だけ余裕を持たせてデザインする必要があるのですが、実際にはどれだけの幅を考慮すればよいのか分からないので、とりあえずデスクトップブラウザでチェックしました。
Browser | Ver. | width(px) |
IE | 11.x | 17 - 17 |
FireFox | 31.x | 15 - 16 |
Chrome | 36.x | 13 - 15 |
Safari(win) | 5.x | 15 - 17 |
Opera | 23.x | 15 - 17 |
1920ディスプレイの Win8 デスクトップ機でスクリーンキャプチャから計測した値です。スクロールバーの(両)横に 1px - 2px 程度の微妙な枠が含まれていて、どこまでがビューポートとして認識されているかわかりませんでした。したがって幅はその分の誤差を持たせて表記しています。IE はビューポートにスクロールバーを考慮しなかったと記憶していますが、バージョンの差もあるでしょうから念のため。
これに加えてスマートフォンなどを考慮する必要があるわけですが、それを込みにしても、スクロールバーは 20px 程度の幅を見ておけば良さそうです。