Мој пријатељ ме је недавно контактирао да тражи помоћ за ВордПресс сајт који је направио користећи Кс тему. Његов клијент га је позвао тог јутра након што је приметио да се његова веб локација не приказује исправно на његовом иПхоне-у. Ник је то сам проверио, и наравно, прелеп респонзивни дизајн који је дизајнирао више није функционисао.
Био је додатно збуњен чињеницом да када је променио величину прозора свог претраживача на радној површини, сајт је реаговао, али је на његовом иПхоне-у била приказана само верзија за десктоп. Зашто би сајт реаговао на стоном рачунару, а не би реаговао на мобилном уређају?
Зашто респонзивни дизајн не ради
Реактивни дизајн престаје да функционише када недостаје једна линија кода у заглављу ХТМЛ датотеке. Ако ова једна линија кода недостаје, ваш иПхоне, Андроид и други мобилни уређаји ће претпоставити да је веб локација коју гледате десктоп веб локација пуне величине и прилагодити величину виевпортда обухвати цео екран.
Шта подразумевате под оквиром приказа и величином оквира приказа?
На свим уређајима, величина оквира за приказ се односи на величину области веб странице која је тренутно видљива кориснику. Замислите да држите иПхоне 5 ширине 320 пиксела. Осим ако није изричито речено другачије, иПхоне уређаји претпостављају да је свака веб локација коју посетите веб локација за рачунаре ширине 980 пиксела.
Сада, користећи свој имагинарни иПхоне 5, посећујете веб локацију дизајнирану за радну површину која је широка 800 пиксела. Нема прилагодљив изглед, тако да ваш иПхоне приказује десктоп верзију пуне ширине.
Не то није. Са величином оквира за приказ, скалирање може бити укључено. иПхоне мора да умањи приказ да би видео верзију веб странице у пуној ширини. Запамтите да се област приказа односи на област странице која је тренутно видљива кориснику. Да ли корисник иПхоне-а тренутно види само 320 пиксела странице или види верзију пуне ширине?
Тако је: Они виде веб страницу пуне ширине на свом екрану јер је иПхоне претпоставио да је то подразумевано понашање: умањено је тако да корисник може да види веб страницу до ширине од 980 пиксела. Према томе, оквир за приказ иПхоне-а је 980 пиксела.
Како увећавате или умањујете, величина прозора се мења. Раније смо рекли да наша имагинарна веб локација има ширину од 800 пиксела, па ако бисте зумирали свој иПхоне тако да ивице веб странице додирују ивице екрана вашег иПхоне-а, прозор за приказ би био 800 пиксела. иПхоне може имати оквир за приказ од 320 пиксела на веб локацији за десктоп рачунаре, али да јесте, видели бисте само мали део тога.
Моја респонзивна веб локација је покварена. Како да то поправим?
Одговор је један ред ХТМЛ-а који када се убаци у заглавље веб странице говори уређају да подеси оквир за приказ на сопствену ширину (320пк у случају иПхоне-а 5) и да не мења величину (или зумирајте) страницу.
За техничку дискусију о свим опцијама у вези са овом мета ознаком, погледајте овај чланак на тутсплус.цом.
Како поправити ВордПресс Кс тему када не реагује
Назад на мог пријатеља од раније: Ова једна линија кода је нестала када је ажурирао Кс тему. Када поправљате своју, имајте на уму да Кс тема не користи само једну датотеку заглавља – она користи различите датотеке заглавља за сваки стек, тако да ћете морати да измените своје.
Пошто Ник користи Етхос стек Кс теме, морао је да дода линију кода који сам раније поменуо у заглављу која се налазила у к /фрамеворкс/виевс/етхос/вп-хеадер.пхп . Ако користите други стек, замените име свог стека (Интегрити, Ренев, итд.) за „етхос“ да бисте пронашли исправну датотеку заглавља. Убаците тај један ред, и воила! Спремни сте.
Дакле, ово поправља и моје ЦСС медијске упите?
Када уметнете тај ред у заглавље своје ХТМЛ датотеке, ваши @медиа упити ће одједном поново почети да функционишу и мобилна верзија ваше веб локације ће оживети. Хвала на читању и надам се да ће вам помоћи!
Не заборавите да Паиетте Форвард, Давид П.
