web-dev-qa-db-ja.com

Google Mobile Usabilityでは、「画面よりもコンテンツが広い」と表示されますが、ローカルで再現できず、Xオーバーフローは非表示に設定されています

[Googleモバイルユーザビリティ]> [Google Search Consoleの画面より広いコンテンツ]のエラーを修正できません。 DevToolsのchromeモバイルレイアウトエミュレータを試してみました。幅を320pxに設定しましたが、水平スクロールは表示されません。したがって、エミュレーターではすべて正常に見えますが、Googleでエラーが発生します。次に、cssに追加します。

@media screen {
  html, body {
    width:      100%; 
    overflow-x: hidden;
  }...

ただし、効果はありません。エラーは引き続き発生します。

ライブURLテストツールはエラーを表示せず、すべてのページがモバイルフレンドリーです。

これを修正する方法はありますか？これはグーグルのバグだと思いますが、どうすれば回避できますか？

google-search-consoleweb-developmentcssmobile
5
LeonidMew

クラスからすべての「position：absolute」を削除しました。しかし、そのクラスは、最小のスマートフォン画面にうまく収まる隠しコンテンツに割り当てられ、要素のほとんどがページ要素に接続されていませんでした。要素はパスワードで保護されているためです。

「インデックス作成のリクエスト」をクリックしてから長い時間待たずに、ページをより速くレンダリングする方法を見つけました。最初に、サイトテンプレートとcssを使用して新しいページを作成します。ページ上のテキストは一意である必要があります（Lorem Ipsum Generatorヘルプ）。次に、新しいファイルを指すURLが1つだけのサイトマップファイルをもう1つ作成し、sibmitして、5分以内にページをクロールしてインデックスを作成します。テンプレートまたはcssのバグを検索する際に非常に役立ちます。

編集：したがって、position: absolute;のバグにより、width: 220px;を使用しても、Google Search Consoleでページ内のエラーが検出されます。解決策は、position: absoluteを削除し、再度javasciptで設定することです。私の場合、それはポップアップダイアログでしたが、とにかくダイアログを表示するためにjavascriptに注意しました。そのJavaScriptは、ウィンドウサイズを考慮する必要があります。

4
LeonidMew