この記事は、自社のホームページをスマホで見たら崩れていた、パソコンでは普通なのに、という事業者の方に向けて書いています。
「崩れ 0」の確かめ方が狭かった
当方のサイトでは、崩れていないかの確かめを、はじめは次の条件でしていました。
- 画面の幅は 2 つ（スマホの幅と、パソコンの幅）
- メニューは閉じた状態だけ
この確かめでは、崩れは 0 でした。
幅を 11 通りに増やし、メニューを開いた状態も含めて測り直しました。すると、4 ページ × 11 幅の 44 組のうち 32 組で、画面の横にはみ出していました。
- 20 組は、メニューを閉じていても崩れていました。スマホとパソコンの間の幅（タブレットに近い幅）です
- 12 組は、スマホの幅でメニューを開いたときだけ崩れていました。大きいものは、横に 126 ピクセルはみ出していました。原因は、条件をつけずに書いた 1 行でした
はじめに見ていた 2 つの幅では、崩れが 1 つも出ていませんでした。崩れていたのは、その間の幅と、開いた状態でした。
はみ出さない崩れもある
別の日には、見た目の違う崩れが 3 つ同時に出ました。
- 見出しが 1 語のまま、横にはみ出す
- 4 文字の項目が「直す範／囲」と途中で折れる
- 下のメニューが 1 字ずつ縦に並ぶ
「横にはみ出していないか」の確かめで見つかるのは、1 つ目だけです。2 つ目と 3 つ目は、はみ出さずに崩れます。3 つとも原因の場所が違い、直し方も違いました。
自分で確かめる 3 つ
- スマホを縦と横で見る。 横向きにすると別の崩れが出ることがあります
- メニューを開いた状態で見る。 フォームや表のあるページも開きます
- パソコンのブラウザで、幅を少しずつ狭くしながら見る。 スマホとパソコンの間の幅で崩れる所が見つかります
崩れた所は、画面の写しと「どの機械・どの向き・どの状態か」をメモしておくと、直す人に伝わります。
依頼するなら、受け取るもの: どの幅・どの状態で確かめたかの一覧と、崩れの種類ごとの数（直す前と後）。
全文は本家に
点検で分かること、依頼の前に用意するものは、本家の記事にまとめています。
Sumitsuke は、事業者の方（法人・個人事業主）から、ホームページやシステムの点検と修理を納品型で受けています。