Моја прилагодљива веб локација не ради. Решење: Приказни оквир.

My Responsive Website Isn T Working







Испробајте Наш Инструмент За Елиминисање Проблема

Шта значи име Јаред?

Мој пријатељ ме је недавно контактирао и затражио помоћ око ВордПресс странице коју је направио помоћу Кс теме. Његов клијент назвао га је тог јутра након што је приметио да се његова веб локација не приказује правилно на његовом иПхонеу. Ницк је то сам проверио, и сасвим сигурно, прелепи одзивни дизајн који је дизајнирао више није функционисао.





Даље га је мистификовала чињеница да када је променио величину прозора прегледача на својој радној површини, веб локацији био реагујући, али на његовом иПхонеу приказана је само верзија за рачунаре. Зашто би сајт био прилагодљив на стоном рачунару и не реагује на мобилном уређају?



Зашто прилагодљиви дизајн не функционише

Респонзивни дизајн престаје да функционише када у заглављу ХТМЛ датотеке недостаје један ред кода. Ако недостаје овај један ред кода, ваш иПхоне, Андроид и други мобилни уређаји ће претпоставити да је веб локација коју прегледавате веб локација у пуној величини за рачунаре и прилагодити величину виевпорт да обухвати цео екран.

Шта подразумевате под приказом и величином видног поља?

На свим уређајима, величина оквира за приказ односи се на величину подручја веб странице која је тренутно видљива кориснику. Замислите да држите иПхоне 5 ширине 320 пиксела. Ако изричито није другачије речено, иПхонес претпостављају да је свака веб локација коју посетите радна површина са ширином од 980пк.

Сада, користећи ваш замишљени иПхоне 5,посетите веб локацију дизајнирану за радну површину ширине 800 пиксела. Нема прилагодљив изглед, тако да ваш иПхоне приказује верзију радне површине пуне ширине.





Звучник не ради на иПхоне -у

Али иПхоне 5 је широк само 320 пиксела. Није ли то увек величина оквира за приказ?

Не то није. Са величином видног поља, може се укључити скалирање . ИПхоне мора смањити да би видео верзију веб странице у пуној ширини. Имајте на уму да се оквир за приказ односи на подручје странице која је тренутно видљива кориснику. Да ли корисник иПхонеа тренутно види само 320 пиксела странице или види верзију пуне ширине?

Тачно: На свом екрану виде веб страницу пуне ширине, јер је иПхоне претпоставио да је то подразумевано понашање: Умањена је како би корисник могао да прегледа веб страницу до ширине од 980 пиксела. Према томе, приказ иПхоне-а је 980пк.

Како увећавате или умањујете приказ, величина оквира за приказ се мења. Раније смо рекли да наша замишљена веб локација има ширину од 800 пиксела, па ако бисте зумирали иПхоне тако да ивице веб странице додирују ивице екрана вашег иПхонеа, приказ би био 800 пиксела. ИПхоне моћи имате приказну површину од 320 пиксела на веб локацији за рачунаре, али да јесте, видели бисте само мали део.

белешке су нестале са иПхоне 6

Моја реактивна веб локација је покварена. Како то поправити?

Одговор је један ред ХТМЛ-а који када се убаци у заглавље веб странице каже уређају да постави оквир за приказ на сопствену ширину (320 пиксела у случају иПхоне 5) и да не увећава (или зумира) страницу.

За техничку расправу о свим опцијама повезаним са овом метаознаком, погледајте овај чланак на тутсплус.цом .

Како поправити ВордПресс Кс тему када не реагује

Повратак мом пријатељу од раније: Овај ред кода је нестао када је ажурирао Кс тему. Када поправљате своје, имајте на уму да Кс тема не користи само једну датотеку заглавља - она ​​користи различите датотеке заглавља за сваки стек, тако да ћете морати да уредите своју.

екран ипхоне 5 има низ линија

Пошто Ницк користи Етхос стог Кс теме, морао је да дода линију кода коју сам раније поменуо у датотеку заглавља која се налази у к /фрамеворкс/виевс/етхос/вп-хеадер.пхп . Ако користите други стек, замените име стека (Интегрити, Ренев, итд.) За „етхос“ да бисте пронашли тачну датотеку заглавља. Уметните тај један ред и воила! Добро је да кренете.

Дакле, и ово поправља моје ЦСС медијске упите?

Када убаците тај ред у заглавље ХТМЛ датотеке, ваши респонзивни @медиа упити одједном ће поново почети да функционишу и мобилна верзија ваше веб странице ће оживети. Хвала на читању и надам се да помаже!

Не заборавите да Паиетте проследи,
Давид П.