Cysylltodd ffrind i mi â mi yn ddiweddar i ofyn am help gyda safle WordPress yr oedd wedi'i adeiladu gan ddefnyddio'r thema X. Roedd ei gleient wedi ei alw y bore hwnnw ar ôl iddo sylwi nad oedd ei wefan yn arddangos yn gywir ar ei iPhone. Gwiriodd Nick ef ei hun, ac yn sicr ddigon, nid oedd y dyluniad ymatebol hardd a ddyluniodd yn gweithio mwyach.
Cafodd ei syfrdanu ymhellach gan y ffaith, pan newidiodd ffenestr ei borwr ar ei bwrdd gwaith, y wefan oedd ymatebol, ond ar ei iPhone, dim ond y fersiwn bwrdd gwaith a arddangoswyd. Pam fyddai safle ymatebol ar gyfrifiadur pen desg a ddim yn ymatebol ar ddyfais symudol?
Pam nad yw Dylunio Ymatebol yn Gweithio
Mae dyluniad ymatebol yn stopio gweithio pan fydd un llinell o god ar goll o bennawd ffeil HTML. Os yw'r llinell sengl hon o god ar goll, bydd eich iPhone, Android a dyfeisiau symudol eraill yn tybio bod y wefan rydych chi'n edrych arni yn safle bwrdd gwaith maint llawn ac yn addasu maint y viewport i gwmpasu'r sgrin gyfan.
Beth ydych chi'n ei olygu wrth Viewport a Maint Viewport?
Ar bob dyfais, mae maint y porth gwylio yn cyfeirio at faint ardal tudalen we sydd i'w gweld ar hyn o bryd gan y defnyddiwr. Dychmygwch eich bod chi'n dal iPhone 5 gyda lled o 320 picsel. Oni ddywedir yn benodol fel arall, mae iPhones yn tybio bod pob gwefan yr ymwelwch â hi yn safle bwrdd gwaith sydd â lled o 980px.
Nawr, gan ddefnyddio'ch iPhone 5 dychmygol,rydych chi'n ymweld â gwefan sydd wedi'i chynllunio ar gyfer bwrdd gwaith sy'n 800px o led. Nid oes ganddo gynllun ymatebol, felly mae eich iPhone yn arddangos y fersiwn bwrdd gwaith lled llawn.
ddylwn i ddefnyddio galw wifi
Ond dim ond 320 picsel o led yw iPhone 5. Onid yw hynny bob amser maint yr wylfa?
Na, dydi o ddim. Gyda maint viewport, gall graddio fod yn gysylltiedig . Rhaid i'r iPhone chwyddo allan i weld fersiwn lled llawn y dudalen we. Cofiwch fod gwyliadwriaeth yn cyfeirio at y darn o dudalen sydd i'w gweld ar hyn o bryd gan y defnyddiwr. A yw defnyddiwr yr iPhone ar hyn o bryd yn gweld dim ond 320 picsel o'r dudalen, neu a ydyn nhw'n gweld y fersiwn lled llawn?
Mae hynny'n iawn: Maen nhw'n gweld y dudalen we lled llawn ar eu harddangosfa oherwydd bod yr iPhone wedi tybio ei ymddygiad diofyn: Mae wedi chwyddo allan fel y gallai'r defnyddiwr weld tudalen we hyd at led o 980 picsel. Felly, golygfa'r iPhone yw 980px.
Wrth i chi chwyddo i mewn neu allan, mae maint yr wylfa yn newid. Fe ddywedon ni o’r blaen fod gan ein gwefan ddychmygol led o 800px, felly pe byddech chi'n chwyddo yn eich iPhone fel bod ymylon y wefan yn cyffwrdd ag ymylon arddangosfa eich iPhone, byddai'r wylfa yn 800px. Yr iPhone can mae gennych olygfa o 320px ar safle bwrdd gwaith, ond os gwnaeth, dim ond cyfran fach ohono y byddech chi'n ei weld.
aeth fy iphone yn ddu a pheidio â throi ymlaen
Mae fy ngwefan ymatebol wedi torri. Sut Ydw i'n Ei Atgyweirio?
Yr ateb yw un llinell o HTML sydd, pan gaiff ei fewnosod ym mhennyn tudalen we, yn dweud wrth y ddyfais osod y porth gwylio i'w lled ei hun (320px yn achos iPhone 5) ac i beidio â graddio (na chwyddo) y dudalen.
I gael trafodaeth fwy technegol ar yr holl opsiynau sy'n gysylltiedig â'r tag meta hwn, edrychwch ar yr erthygl hon ar tutsplus.com .
Sut I Atgyweirio Thema WordPress X Pan nad yw'n Ymatebol
Yn ôl at fy ffrind o'r blaen: Diflannodd yr un llinell hon o god pan ddiweddarodd y thema X. Wrth drwsio'ch un chi, cofiwch nad yw'r thema X yn defnyddio un ffeil pennawd yn unig - mae'n defnyddio ffeiliau pennawd gwahanol ar gyfer pob pentwr, felly bydd yn rhaid i chi olygu eich un chi.
beth sy'n digwydd pan fydd sgrin iphone yn mynd yn ddu
Gan fod Nick yn defnyddio pentwr Ethos o thema X, roedd yn rhaid iddo ychwanegu llinell o god y soniais amdano o'r blaen at y ffeil pennawd a oedd wedi'i lleoli yn x /frameworks/views/ethos/wp-header.php . Os ydych yn defnyddio pentwr gwahanol, rhowch enw eich pentwr (Uniondeb, Adnewyddu, ac ati) yn lle ‘ethos’ i ddod o hyd i’r ffeil pennawd gywir. Mewnosodwch yr un llinell honno, a voila! Rydych chi'n dda i fynd.
Felly Mae Hwn Yn Trwsio Fy Ymholiadau Cyfryngau CSS, Rhy?
Pan fewnosodwch y llinell honno ym mhennyn eich ffeil HTML, bydd eich ymholiadau ymatebol @media yn dechrau gweithio eto yn sydyn a bydd fersiwn symudol eich gwefan yn dod yn ôl yn fyw. Diolch am ddarllen a gobeithio ei fod yn helpu!
Cofiwch Payette Ymlaen,
David P.