Googleテストの「ページはモバイルフレンドリーではありません」レポートを修正
Googleの検索結果では、「このページはモバイルフレンドリーではありません」と報告されています。これを修正したいです。
モバイルフレンドリーテストでWebサイトをテストすると、次のように報告されます。
- 画面よりも広いコンテンツ。
- クリック可能な要素が近すぎます。
これらの問題を引き起こしているアイテム/コンテンツを見つけるにはどうすればよいですか？
任意の助けをいただければ幸いです。
私の経験では、Googleツールは、画面をモバイルフレンドリーにするために使用した可能性のある巧妙なCSSやその他の手法を把握するのに十分なほどスマートではありません。たとえば、画面の幅に応じて列を削除するテーブルがあり、「table-responsive」のブートストラップを使用していましたが、「overflow-x：auto;」スタイルに無意味なdivを入れるまでは。コンテンツは画面よりも広いと考えられました。同様に、小さなフォームファクターにいくつかのクリック可能な要素をドロップしますが、モバイルデバイスに表示されていなくても、クリック可能な要素が近すぎるとGoogleは考えています。
それは単なる愚かなツールであり、回避策を見つけるか、コンテンツをダムダウンする必要があります。
私は同じエラーを見ましたが、問題は明らかではありませんでした。小さいビューポートで表示すると、フッターにリンクがあふれるスティッキーウィジェットがありました。 CSSを使用して小さな画面でウィジェットを非表示にし、修正済みとしてGoogleに再送信しました。 Googleは24時間以内に問題を修正済みとしてマークしました。
- 画面より広いコンテンツ。
- ページコンテンツが水平方向のオーバーフローを引き起こしています。ブラウザの視点を変更することで問題を再現し、オーバーフローが発生するかどうかを確認できるはずです。 Google Fetch URLを試すこともできますが、結果は制限されます。
- モバイルの互換性をテストする最も簡単で最適な方法は、Chrome Dev Tools Androidデバイスでのリモートデバッグ を使用することです。この方法で、 'inspect element'を使用できますデスクトップコンピュータの快適さから、モバイルデバイス。
クリック可能な要素が近すぎます。
- これはかなり明白なはずです。要素が近すぎます。
ユーザーがタッチスクリーンを正確に押すのは、従来のマウスカーソルを使用する場合よりも、小さいリンクまたはボタンがぎっしり詰まっています。ユーザーが誤って間違ったものを押すことでイライラするのを防ぐには、タップターゲットを十分に大きくし、他のタップターゲットと重ならないように指パッドなしでそれらを押すことができるように、他のタップターゲットから遠ざける必要があります。成人の指パッドの平均サイズは幅約10mm（0.5インチより少し小さい）であり、Android UIガイドラインでは、約7mm、または適切に設定されたモバイルビューポート。
モバイルデバイスの正しい間隔についてのアイデアを提供し、それが良い習慣であるため、 Googleのマテリアルデザインのメトリックとキーライン を確認することをお勧めします。