Moj prijatelj me nedavno kontaktirao i zatražio pomoć oko WordPress stranice koju je izgradio pomoću teme X. Njegov ga je klijent nazvao tog jutra nakon što je primijetio da se njegova web stranica ne prikazuje pravilno na njegovom iPhoneu. Nick je to sam provjerio, i zasigurno, prekrasan responzivni dizajn koji je dizajnirao više nije radio.
Dalje ga je mistificirala činjenica da je, kada je promijenio veličinu prozora preglednika na radnoj površini, web mjestu bio responzivan, ali na njegovom iPhoneu prikazana je samo verzija za radnu površinu. Zašto bi stranica bila reagira na stolnom računalu 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 mjesto koje gledate web mjesto u punoj veličini i prilagoditi veličinu vidikovca da obuhvati cijeli zaslon.
Što 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 svako web mjesto koje posjetite stolno računalo širine 980px.
Sada, koristeći svoj zamišljeni iPhone 5,posjetite web mjesto dizajnirano za radnu površinu širine 800 piksela. Nema prilagodljiv izgled, tako da vaš iPhone prikazuje verziju radne površine pune širine.
moj ipad se ne može spojiti na wifi
Ali iPhone 5 širok je samo 320 piksela. Nije li to uvijek veličina okvira za prikaz?
Ne, nije. S veličinom vidnog polja, može biti uključeno skaliranje . IPhone mora smanjiti kako 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 980 piksela. Stoga je prikaz iPhone-a 980px.
Kako povećavate ili smanjujete, 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 iPhone zumirali tako da rubovi web stranice dodiruju rubove zaslona vašeg iPhonea, prikaz bi bio 800 piksela. IPhone limenka imate prikaznu površinu od 320 piksela na web mjestu za stolna računala, ali da jest, vidjeli biste samo mali dio.
zašto je moj ekran iphone crno -bijeli
Moja je responzivna web stranica prekinuta. 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 iPhonea 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 temu X. 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.
trgovina aplikacija neće učitati iPhone
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 upotrebljavate drugi stog, zamijenite naziv svog stoga (Integrity, Renew, itd.) Za 'ethos' kako biste pronašli ispravnu datoteku zaglavlja. Umetnite taj jedan redak 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 ponovno početi raditi, a mobilna verzija vašeg web mjesta oživjet će. Hvala na čitanju i nadam se da pomaže!
Sjetite se Payette Forward,
David P.