スマホ対応で横揺れを矯正する方法
レスポンシブで、画面幅によって横揺れが発生する場合があります。
その際には、下記のCSSを使うと改善されます。
1 2 3 4 5 6 7 8 |
@media screen and (max-width : 767px){ html, body { overflow-x: hidden!important; overflow-y: scroll; -webkit-overflow-scrolling: touch; } } |
上記の例では、767pxまでの画面幅に対して横揺れを強制しています。
本来なら、プレーンのCSSで横揺れを発生させないように記述するのがベストですが、CSSが煩雑になってしまって、手っ取り早く矯正したいときには上記コードは便利です。
お困りでしたら一度お試しください^^
公開日:2018年6月29日
最終更新日:2018年6月29日