目次

問題が起きる時の確認事項

「iPhoneから見た時にスクロール中に横ブレしてしまう」力作のサイトにクライアントからこんなツッコミが入ってしまったことがある方も多いのではないでしょうか?

開発中、PCのChrome等でスマホ画面のエミュレーションを行ったりAndroidで見た時は問題ないのに、iPhoneの実機だけおかしいことがあります。縦スクロールする際に微妙に指が斜めにいってしまい、その結果横ブレを引き起こしてしまいます。

1. Viewportを確認

そんな時は、まずViewportを確認しましょう。レスポンシブでサイトを制作する際にこちらを書き忘れることはないと思いますが念のため。

2. .wrapperにoverflow:hiddenを指定してみる

ページを構成している要素を.wrapperや.wrapなどで囲ってoverflow:hidden;をCSSでしていします。

HTML

CSS

これでも解決しない場合の最終手段

以下のCSSを追加しましょう。

タッチの時に慣性スクロールを有効に設定する設定を追加しました。一件、横ブレと関係なさそうなのですが…筆者の環境の場合、大抵こちらの方法で解決できました。

上記で紹介したパターンで解決できればうれしいです。しかし、当然のことながらマークアップのやり方次第で上記が有効でない場合があります。そんな時でも、要素の検証とにらめっこして一つ一つ検証していけば必ず解決可能です。なかなか直せなくても粘り強く対処しましょう。

この記事をシェア