特定の環境で起こるHPの表示に関する問題を解決しました

お客様のホームページで起こった意図しない表示の問題を解決する経緯を紹介。依頼内容に応じた対応を行います。お気軽にご相談ください。

先日、あるお客様からこんなご相談をお寄せいただきました。

今朝、ホームページをスマホで開くと、
横にスクロールできるようになっていて、
スクロールさせると黒い余白があります。
昨日までは普通だったのですが…
ご確認いただけますでしょうか？

こちらで手持ちのiPhoneを使ってチェックしましたが、その方のホームページは上下にしかスクロールしません。

そこで、とりあえずスマホ内に残っているホームページのデータを消す作業（キャッシュ削除）をしていただきました。

それでも画面右にスクロールできて、黒い余白は消えないとの返信が。

 

別の方のiPhoneでも調べていただいた結果、iPhone XsでiOSのバージョンが15.4.1になっていると起こることが判明しました。

…ピンポイントにこちらでは再現されない。

とはいえ、こういう現象が起こるのは間違いないので、何とか原因を突き止めてみることにします。
まずは不具合の状況をより良く理解するためにインタビューを。

１．トップページ以外では同じくおかしな表示になるでしょうか？　それとも、トップページのみでしょうか？

２．トップページのみの場合、右側に妙な隙間が空いているのはどこまででしょうか？
隙間がなくなる箇所が途中にあれば、その箇所のスクリーンショットをお送りください。

３．右側に隙間が空いている箇所で左右にスクロールできるでしょうか？

恐れ入りますが上記よろしくお願いいたします。

しばらくして返信が届きました。

1 トップのみです
3 スクロールできません

そして、２については、文中の見出しが黒い余白の上まではみ出しているスクリーンショットが届きました。

次は、他のページの長い見出しでも同じ事が起こっていないかを確認します。

私「●●ページの２番目の見出しは改行されていますか？」
お客様「されています」
私「××ページのタイトルは改行されていますか？」
お客様「されてますね」

そこで、トップページの長い見出しと他のページの長い見出しを見比べてみます。

「…まさか、原因はこれ？」

今までに聞いたこともなかった不具合なので今ひとつ納得が行きません。しかし、他に可能性が考えられませんので対策を施しました。

すると、

キレイに表示されるようになりました！
ありがとうございます！

という返信が届き、この問題は無事に解決しました。

※何が問題でどう解決したかは細かすぎるため省略します。

 

お客様のパソコンやスマホで起こっている問題を、実際にこちらの環境でも確認できる方が確実に解決できます。

しかし、今回の事例のようにこちらの環境で問題が確認できない場合でも、HTMLソースなどを見ながら状況を質問することで、何とかなることもございます。

「ホームページの表示がおかしい」という問題に限らず、

• 最近Googleの検索順位が大きく落ちた
• HPのフォームから迷惑メールが多く届く
• WordPressで「サイトに重大な問題があります」と出ている
• HPの更新方法やソフトの使い方などを教えてほしい

などお困り事がもしございましたら、このメルマガへの返信や、下記フォーム・LINE公式アカウントからご相談ください。

こちらで対処できるかどうかを調べた上で、可能な場合は作業費用を見積もります。

もちろん、強引な営業など一切いたしませんのでご安心ください。