現象がちょっとマニアックすぎるかもしれないんですが…(*ﾉωﾉ)
GoogleChromeの検証ツールでスマホサイトを確認しているとき、なぜか画面がはみ出てしまうことありません？
こんな感じに。
bodyの幅自体はデバイス幅と同じだし、はみ出している要素があるわけでもないのになぜか見切れる。
この事象が起こるタイミングは色々あるんですが、
- PCサイトから検証ツールでスマホサイトに切り替えたタイミング
- 検証ツールのスマホサイトの確認機種を変えたタイミング
- ランドスケープを変えたタイミング
など、なにげなく確認してたら急に…ということが多いです。
私は最近までこの現象にかち当たったらひたすらキャッシュクリアする（ほぼ効果ない）とか、ちょっとPCを寝かせる（？）とかしていたんですが
解決方法を編み出したのでここでご報告いたします。
解決策
ブラウザの拡大率を100%にする。
これだけです。
いやいやもともと100%なんだけど…って人が多いと思いますが、その場合は一度110%や90%に変えてから、もう一回100%に設定しなおすんです。マウスホイールをコロコロッと一回上下に転がすだけです。
もしくは、拡縮画面に出てくる「リセット」ボタンを押す。
どうですか、うまいこと調整されませんか。
事象が起こる原因も直る理由も不明ですが、とりあえず今のところこれで直るのでヨシ！
良い検証ライフを！
ちなみにこれで直らない場合はCSSでレスポンシブの設定が出来ているかもちゃんと確認してみてくださいね☆
