突然の「このページはモバイル フレンドリーではありません」を解消する

我々のようなサイト制作を生業にしていると、デザインやコーディングのみならず、マーケティングやSEOなどについても、よろしくおねがい!と言われることが多々ありますよね?

ふとこないだ弊社のサイトを確認すると、「このページはモバイル フレンドリーではありません」的な文章が検索結果に現れるじゃありませんですか。
あれ?と思いgoogle search consoleをチェックすると、以下のようなエラーが出ています。

・クリック可能な要素同士が近すぎます
・コンテンツの幅が画面の幅を超えています

ぶっちゃけそんな言われもなく、キレイキレイに表示されているんです。
ん〜〜〜、でもこのままだと恥ずかしいしな〜と思い解消にむけて頑張り始めます。
コレ、かなり厄介でした。

デザインやCSSもいろいろいじってみる。→なおらん
ただ、検査すると「このページはモバイル フレンドリーです」と表示される。
マジクソ!!!!!!!!!ウリュウウウウ!!!状態

とりあえず返信ないのわかってるけど、フィードバックを送信などしてみるw

やっぱりなにも返ってこないのでもう一度とりかかります。
毎回毎回確認を送信するので、結果がでるまで毎回2日くらいかかるんですよね。
全然進みません。

原因をじっくり考えてみます、、

いまのところ怪しいのが

モバイルフレンドリーテストをすると、ファイルが全部読み込まれない
・何回もやると毎回結果が違う
・たまにうまくいくとスクリーンショットを見ると、確かに画面幅を超えている

いろいろ検索してみても上2つは解決できなそうなので、最後について考えてやってみる。

・widthをvw→%に変更。→かわらない
・landscapeとかもいじってみる→かわらない
・cssの読み込み順の変更→かわらない
・min-width:auto→結果これが問題!!!

min-width:autoをmin-width:1pxに変更したら、「このページはモバイル フレンドリーではありません」的な文章が消えましてん!!!

っていうか、「min-width:auto」はダメなんか?

filed under: css