Instrucțiuni pas cu pas pentru cea mai simplă adaptare a site-urilor pentru dispozitivele mobile, luând în considerare recomandările Google și automatizând întregul proces.
Permiteți-mi să vă reamintesc că Google ia în considerare numai patru componente ale adaptării site-ului pentru dispozitivele mobile:
Pasul 1: Descărcați arhiva mobilefriendly.zip din acest link.
Pasul 2: în secțiune
... specificați fereastra de vizualizare pentru meta tag:Pasul 3: Dezarhivați și încărcați fișierul mob-style.css pe server.
Notă. mob-style.css este cea mai simplă foaie de stil care ține cont de o serie de recomandări Google enumerate mai sus. Face link-uri cu butoane, rânduri de tabel, imagini din cauciuc, liste de șir și multe altele. Dacă este necesar, îl puteți corecta întotdeauna așa cum aveți nevoie.
Scriptul verifică dacă browserul este mobil sau nu. Dacă da, va opri toate foile de stil în documentul HTML și va adăuga mob-style.css.
Notă. pentru link.href trebuie să înregistrați calea către fișierul mob-style.css.
"Pasul 4: înainte de eticheta corpului de închidere"
poate fi mai corectă "Pasul 4: înainte de eticheta capului de închidere"?
dar nu am acordat atenție încărcării.
o astfel de întrebare a apărut încă. a decis să încerce pe mai multe site-uri pentru experiment. în test Google acum totul este ok pe aceste site-uri în termeni de mobil-friendly.
dar vreau să verific cum va arăta în viață, dar acum nu există nimic de la gadgeturi pentru a verifica pentru a vedea cum arată totul. a început pe internet să se uite la site-uri unde sunt generate focuri de ecran pentru diferite rezoluții, dar aproape peste tot oferă o vedere cu o foaie de stil standard. poți să-mi spui, o resursă pentru această afacere?
// if (! (/ Android | webOS | iPhone | iPad | iPod | BlackBerry | IEMobile | Opera Mini / i.test (navigator.userAgent))) retur;
Apoi, veți putea să vă uitați la desktop și, dacă este necesar, să utilizați modul Toggle device în instrumentele dezvoltatorului de browser. sau cel mai mare pentru a scala o fereastră a unui browser.
bine, inteles.
Mulțumesc, mă voi uita acum.
mob-style.css încărcați în WP în dosarul șablonului?
2cergei kutuzoy oriunde, scrieți adresa URL în link.href
Nu ma ajutat. Inserat fișierul în rădăcina site-ului. Încercat și link.href = 'mob-style.css'; și astfel link.href = '/mob-style.css';
Promiți în ce poate fi o afacere?
2 scriptul Tatyana Krivonos dezactivează foile de stil disponibile și leagă mob-style.css numai dacă navigați pe site de pe un dispozitiv mobil, altfel nu.
Mulțumesc, Kostya. Acesta funcționează. E genial. Voi împărți traficul.
Constantine bună. Și nu există nimic ca blogging-ul pentru bloguri. Am în vedere o imagine de cauciuc, link-uri prin butoane. Eticheta de vizualizare a fost inserată pentru o perioadă lungă de timp. În general, blogul este testat pentru optimizare pentru telefonul mobil 99/100. Dar paginile cu fundaluri, cadre gata și așa mai departe sunt mai rău decât oriunde altundeva. Pe unele au redus dimensiunea imaginilor, dar totuși testul nu trece. Deși șterg pagina, nu știu ce altceva să fac.
Kostya, știu această variantă, chiar am scris un articol despre optimizare pentru blogurile mobile blogs. Am selectat șabloanele până când le-am ales pe cea mai reușită. Alegerea șablonului afectează în mare măsură verificarea în PageSpeed. Dar aici, cu imagini, întrebarea nu este rezolvată. Vă mulțumim pentru răspuns.
2Olga Protasova, desigur, trebuie să dopilivat șablon sau să utilizeze unul care este, nu există nici o soluție simplă. În detrimentul căprioarelor, totul este simplu. Adăugați această regulă în css:
În mod tipic, conținutul articolului folosește post-corpul clasei CSS, dacă celălalt trebuie să-l folosească. Proprietatea maximă a lățimii proprietății: 100% îi spune browserului că imaginea nu poate fi mai lată decât lățimea elementului părinte și ajustează automat dimensiunea imaginii pentru aceasta.
Constantine, linia a fost adăugată, dar când se verifică programul până când rezultatul este zero, poate avea nevoie de timp. La mine încă o astfel de întrebare: cum să includă un cache de browser în conformitate cu recomandarea programului. Scrieți că nu este specificată sau data expiră. Încercat să găsească informații pe Internet, dar a fost găsit doar pentru bloguri pe WordPress. Puteți face ceva în blogspot?
Olga Protasova nu confunda o singură soluție cu un set de sarcini, este necesar să se ia în considerare o problemă specifică. Am verificat www.ozarabotkevceti.ru acolo totul pare normal. Nici măcar nu știu unde sunt imaginile, dar nu voi fi superfluă.
Cu cache-ul pe resursele terților, nu veți face nimic.
Konstantin, în blogul pe care l-ați verificat, nu sunt prezente când verificați programul și în instrumentele pentru webmasteri google nu există o singură pagină cu erori. Blog www.bdblogov.ru aici sunt 7 pagini cu erori, deși, în general, am scris deja un test blogul a mers perfect.
2 Elza Pan Soluția nu este cea mai versatilă. O nu poate lua în considerare toate caracteristicile layout-ului. De obicei, meniurile sunt făcute prin listele UL LI și în acest caz totul este bine. Dar merită menționat că puteți obține o listă destul de mare, trebuie să conectați add-on-ul pentru a "mobiliza" meniul. Dar acest lucru trebuie făcut de unul singur.
Multumesc imens, singurul site normal, cu o optiune care functioneaza cu adevarat (cu totul pe Internet)
Articole similare
Trimiteți-le prietenilor: