GoogleとBingによるモバイルフレンドリーなテストで、私のサイトがモバイルフレンドリーではないと間違っているのはなぜですか？

Question

私のリソースサイトは反応して、複数のリアルフォン（iPhone、Android、Windows）でテストされており、テストしたすべての携帯電話でうまく見えます。

リソースサイト：ChromeとSafariでテストしたときhttps://www.bidsketch.com/resources/

また、細かいスケールダウン。しかし、BingとGoogleのモバイルフレンドリーテストではサイトが正しく表示されません。

古いバージョンのCSSが表示されているようですが、meta/viewportタグが表示されています。サイトでは最新のバージョンが提供されているだけで、この問題が発生しているのは数週間ですが、キャッシュされている可能性はありません。

同様の応答コードを持つマーケティングサイトは、反応性が高いと正しく見えます。

リソースサイトではマーケティング31db0bf8ce9fcecf2bceb39be640285e.cssファイルが応答CSSコードを持っています

/** 
Responsive 
*/ 
@media (max-width: 720px) { 
    #header .logo { 
     float: none !important; 
     display: inline-block; 
    } 

    #header #nav { 
     float: none !important; 
     display: block; 
    } 
    #header #nav li { 
     float: none !important; 
    } 

    #header { 
     text-align: center; 
     padding-right: 20px !important; 
     padding-left: 20px !important; 
    } 

    .heading-box h1 { 
     line-height: 140%; 
    } 

    .main-wrap { 
     padding:0 20px; 
    } 

    #content.resources .tour-box { 
     float: none !important; 
     display: inline-block; 
    } 

    #content.resources .featured .browse-resources { 
     margin-bottom: 20px; 
     display: inline-block; 
    } 


    .start-block .title { 
     float: none !important; 
     font-size: 20px !important; 
     margin-bottom: 8px; 
    } 

    .start-block a.btn { 
     margin-top:8px !important; 
    } 

    #footer { 
     width: 100% !important; 
    } 

    .start-block { 
     background: #074b54 !important; 
     height: 140px !important; 
     text-align: center; 
    } 

    .start-block a.btn { 
     float: none !important; 
     display: block; 
     margin-right: auto !important; 
     margin-left: auto !important; 
    } 

    #content.resources .tour-box { 
     width: auto !important; 
     max-width: 400px; 
     float: none !important; 
    } 

    #content.resources .featured { 
     padding: 80px 20px 20px 20px !important; 
    } 

    #content.resources .tour-block .visual { 
     margin: 0 10px !important; 
    } 

    .tour-box .visual { 
     float: none !important; 
     width: auto !important; 
     max-width: 300px; 
    } 

    .main-holder { 
     overflow: visible !important; 
    } 

    .template-block { 
     padding-right: 0px !important; 
     text-align: center; 
    } 

    .resource-image { 
     margin: 7px auto 0 !important; 
    } 

    .resource-form { 
     margin-right: auto !important; 
     float: none !important; 
     width: auto !important; 
     display: block !important; 
    } 

    h2.inline { 
     max-width: 700px; 
     width: auto !important; 
    } 

    .content-block { 
     width: auto !important; 
     max-width: 960px; 
    } 
    .content-block > div { 
     max-width: 600px; 
     width: auto !important; 
     margin: 0 !important; 
     padding: 0 20px; 
    } 

    p > iframe { 
     width: 100% !important; 
    } 

    .template-area { 
     overflow: visible !important; 
    } 

    #content { 
     float: none !important; 
     width: auto !important; 
     max-width: 710px; 
    } 

    .tour-box { 
     text-align: center; 
    } 
    .tour-box .visual { 
     margin: 0 auto !important; 
    } 

    .heading-box { 
     padding: 60px 10px 15px !important; 
    } 

    #sidebar { 
     display: none; 
    } 

    #footer p, 
    #footer .social-nav, 
    #footer .logo-bottom { 
     display: none !important; 
    } 

    #footer .bottom-nav li { 
     float: none !important; 
     background: none !important; 
     text-align: center; 
     font-size: 14px; 
     line-height: 200%; 
     margin: 0 !important; 
     padding: 0 !important; 
    } 
    .footer-holder { height: auto !important; } 
    #footer .area { float: none !important; width: 100% !important; margin: 0 auto !important; } 
    #footer { padding: 37px 0 !important; } 
    #footer .bottom-nav li a { 
     padding: 10px !important; 
     display: block; 
    } 
} 


body .start-block .title { 
    font-size: 24px; 
} 

#footer { 
    max-width: 980px !important; 
    width: auto !important; 
} 

body { 
    min-width: auto !important; 
} 

#header { 
    width: auto !important; 
    max-width: 960px; 
} 

.main-wrap { 
    width: auto !important; 
    max-width: 960px; 
} 

#content.resources, 
#content.resources .category-row { 
    width: auto !important; 
    max-width: 840px; 
} 

#content.resources .tour-block .summary { 
    width: auto !important; 
    max-width: 800px; 
} 

.start-block { 
    width: auto !important; 
    max-width: 916px; 
} 

.main-wrap .resources-intro { 
    width: auto !important; 
    max-width: 750px; 
} 

.template-block { 
    width: auto !important; 
    max-width: 940px; 
} 

は、私たちが右やっていないか、リソースのサイトのように出てくるの向上のために変更できるものがあります私たちのマーケティングサイトのようなモバイルフレンドリーですか？

Answer 1

これをトラブルシューティングするのに時間を浪費した後、最終的にGoogleとBingのモバイルテストでは好きではなかったことが分かりました。

は、bodyタグはこのスタイルが適用されていた：

body { 
    min-width: auto !important; 
} 

はこれにそれを変更し、それが働いた：

body { 
    min-width: 100% !important; 
} 

Answer 2

よく見ると、要素の一部が右側で途切れて、コンテンツ全体がわずかに右側にプッシュされています。通常、これらのテストを通じてウェブサイトを実行すると、何らかの指示や警告が表示されます。奇妙なことに、初めてhttps://search.google.com/search-console/mobile-friendlyにあなたのサイトを走らせたとき、それは2つのエラー（ボタンが近すぎて、内容が右に出ています）を示しました。だから、ちょうど私が再びそれを実行し、私はエラーが表示されないと、サイトはモバイルフレンドリーだと言います。