Googlebot-mobile sieht nicht wie Chrome-Entwicklertools aus Gerätemodus

Google beschwert sich, dass meine Website nicht für Mobilgeräte optimiert ist. Hier ist, was sie mir sagen, eine zufällige Seite auf meiner Website sieht aus wie Google Bot Handy:Googlebot-mobile sieht nicht wie Chrome-Entwicklertools aus Gerätemodus

Und hier ist, wie die gleiche Seite sieht in Google Chrome Developer Tools Geräte-Modus:

Ich habe ein Responsive Design für meine Website implementiert, und obwohl es noch nicht 100% perfekt ist (wie Sie sehen können, ist der Inhalt etwas breiter als der Bildschirm im zweiten Bild), sieht es nicht wie Google Bot Mobile aus mich. Wenn ich es auf einem echten mobilen Gerät teste, sieht es genauso aus wie der Geräte-Modus von Google Chrome Developer Tools.

Irgendwelche Ideen, was hier falsch sein könnte?

Hier sind die wichtigen Bits in der Kopfzeile:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" /> 
<meta name="mobile-web-app-capable" content="yes"> 

<link rel="stylesheet" media="all" href="/css/base.css" /> 
<link rel="stylesheet" media="(max-width:880px)" href="/css/dropdown.css" /> 
<link rel="stylesheet" media="(max-width:880px)" href="/css/mobile.css" />

mobile.css ist ein zu base.css „add on“, was das Zeug ersetzt, die geändert werden muss, aber base.css stellt die „Vorgaben“ und ist immer geladen .

Es ist, als ob Google Bot mobile das Laden von mobile.css nicht auslöst.

Quelle

2016-03-19 BadCash

Wahrscheinlich, weil Sie 'media =" (max-width: 880px ")' verwenden und '@media-Bildschirm und max-width: 880px {}' in Ihrer Basis nicht verwenden. CSS-Anweisungen in der richtigen Reihenfolge, Sie sollten nicht mehrere CSS-Dateien verwenden müssen. Sie sollten auch schauen, warum Ihre Seite im Handy "überquillt" und den horizontalen Bildlauf verursacht. –

Ich habe es mit nur einer einzigen Datei versucht (ich habe eine neue namens 'all.css' erstellt, um potentielle Caching-Probleme zu vermeiden) und all mein CSS in das mobile Material eingefügt, das vom' @media-Bildschirm und (max-width: 880px) {} '. Es funktioniert wie erwartet im Browser, aber Googlebot zeigt immer noch die Desktop-Version ... Vielleicht sollte ich etwas anderes als 'max-width: 880px' verwenden? – BadCash

Ich endlich geschafft, es zu lösen - es stellt sich heraus, dass es ein min-width: auto; war, dass Googlebot Mobile nicht mochte.

Aus irgendeinem Grund (ein Problem auf Tabletten zu lösen, wenn ich zum ersten Mal meine Responsive Design begann die Umsetzung) hatte habe ich

body{ 
    min-width: 1510px; 
}

in meinem Desktop CSS, und deshalb überwiegend sei, dass mit

body{ 
    min-width: auto; 
}

in meinem mobilen CSS. Nach dem Ändern des mobilen CSS in

Googlebot zeigt die Seite korrekt an. Will sehen ob ich die min-width auf <body> ganz sicher ablegen kann.

Quelle

2016-03-20 12:40:21 BadCash

Googlebot-mobile sieht nicht wie Chrome-Entwicklertools aus Gerätemodus

Antwort

Verwandte Themen