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