chromeデベロッパーツールでスマホ表示をしているとスクロールバーが出てくる

サイト作成時にchromeのデベロッパーツールでスマホの表示を確認しているのですが、サイトによってスクロールバーが出現してしまう事があります。

おそらく、縦横幅の取得が上手く行っていないのではないかと思ったのですが、調べても何も出てきませんでした。

ひとまず、試験しているサイトのCSSに

::-webkit-scrollbar {
display:none;;
}

を追記したところスクロールバーは出現しなくなりました。

但しこの記載はwebkit系のブラウザに有効な設定なので、他の未対応ブラウザで試験する時は効きません。（実験してませんが。。）

実機で見た時は出ないので、あまり気にする事はないのですが、幅がずれるので見栄えの試験ではちょっと困ったので記録しておきます。

尚、これはPCブラウザにも有効ですので、逆にスクロールバーを消したくない時は

@media (max-width: 600px) { ::-webkit-scrollbar { display:none;; } }

のように幅によって適応するなどの対応が必要かと思います。