Moj prijatelj me nedavno kontaktirao i zatražio pomoć oko WordPress stranice koju je napravio pomoću X teme. Njegov klijent nazvao ga je tog jutra nakon što je primijetio da se njegova web stranica ne prikazuje pravilno na njegovom iPhoneu. Nick je to sam provjerio, i zasigurno, predivan odzivni dizajn koji je dizajnirao više nije radio.
Dalje ga je mistificirala činjenica da kada je promijenio veličinu prozora preglednika na radnoj površini web stranice bio reagira, ali na njegovom iPhoneu prikazana je samo verzija za računare. Zašto bi to bila web lokacija prilagodljiv na stolnom računaru i ne reagira na mobilnom uređaju?
Zašto prilagodljivi dizajn ne funkcionira
Responzivni dizajn prestaje raditi kada u zaglavlju HTML datoteke nedostaje jedan redak koda. Ako nedostaje ovaj jedan redak koda, vaši iPhone, Android i drugi mobilni uređaji pretpostavit će da je web lokacija koju gledate web lokacija u punoj veličini i prilagoditi veličinu viewport da obuhvati cijeli ekran.
Šta podrazumijevate pod okvirom prikaza i veličinom prozora?
Na svim uređajima, veličina okvira za prikaz odnosi se na veličinu područja web stranice koja je trenutno vidljiva korisniku. Zamislite da držite iPhone 5 širine 320 piksela. Ako izričito nije drugačije rečeno, iPhones pretpostavljaju da je svaka web lokacija koju posjetite radna površina širine 980px.
Sada, koristeći vaš zamišljeni iPhone 5,posjetite web stranicu dizajniranu za radnu površinu širine 800px. Nema prilagodljiv izgled, tako da vaš iPhone prikazuje verziju radne površine pune širine.
iphone 6 plus zalijepljen na Apple logotipu
Ali iPhone 5 je širok samo 320 piksela. Nije li to uvijek veličina okvira za prikaz?
Ne, nije. Sa veličinom vidnog polja, skaliranje može biti uključeno . IPhone mora smanjiti da bi vidio verziju web stranice u punoj širini. Imajte na umu da se okvir za prikaz odnosi na područje stranice koje je trenutno vidljivo korisniku. Da li korisnik iPhonea trenutno vidi samo 320 piksela stranice ili vidi verziju pune širine?
Točno: Na svom zaslonu vide web stranicu pune širine, jer je iPhone pretpostavio da je to zadano ponašanje: Smanjena je kako bi korisnik mogao pregledavati web stranicu do širine od 980 piksela. Stoga je prikaz iPhone-a 980px.
Kako uvećavate ili umanjujete prikaz, veličina okvira za prikaz se mijenja. Prije smo rekli da naša zamišljena web stranica ima širinu od 800 piksela, pa ako biste zumirali iPhone tako da ivice web stranice dodiruju ivice ekrana vašeg iPhonea, prikaz bi bio 800 piksela. IPhone mogu imate prikaznu površinu od 320 piksela na web lokaciji za računare, ali da jeste, vidjeli biste samo mali dio.
zašto se moj iPhone 6s ne puni
Moja reaktivna web lokacija je pokvarena. Kako to popraviti?
Odgovor je jedan redak HTML-a koji kada se umetne u zaglavlje web stranice kaže uređaju da postavi okvir za prikaz na vlastitu širinu (320 piksela u slučaju iPhone 5), a ne da skalira (ili zumira) stranicu.
Za tehničku raspravu o svim opcijama povezanim s ovom metaoznakom, pogledajte ovaj članak na tutsplus.com .
Kako popraviti WordPress X temu kada ne reagira
Povratak na mog prijatelja od prije: Ovaj jedan redak koda nestao je kad je ažurirao X temu. Kada popravljate svoje, imajte na umu da X tema ne koristi samo jednu datoteku zaglavlja - ona koristi različite datoteke zaglavlja za svaki stog, tako da ćete morati urediti svoju.
kako popraviti crni ekran na ipad mini
Budući da Nick koristi Ethos stog X teme, morao je dodati redak koda koji sam već spomenuo u datoteku zaglavlja koja se nalazila u x /frameworks/views/ethos/wp-header.php . Ako koristite drugi stog, zamijenite naziv svog stoga (Integrity, Renew, itd.) Za „ethos“ kako biste pronašli ispravnu datoteku zaglavlja. Umetnite taj jedan red i voila! Dobro je krenuti.
Dakle, i ovo popravlja moje CSS medijske upite?
Kada umetnete taj redak u zaglavlje HTML datoteke, vaši responzivni @media upiti odjednom će ponovo početi raditi, a mobilna verzija vašeg web mjesta će oživjeti. Hvala na čitanju i nadam se da će vam pomoći!
Sjetite se Payette Forward,
David P.