Мой приятел наскоро се свърза с мен, за да поиска помощ за WordPress сайт, който той беше създал с помощта на X темата. Клиентът му се обадил тази сутрин, след като забелязал, че уебсайтът му не се показва правилно на неговия iPhone. Ник го провери сам и със сигурност красивият отзивчив дизайн, който той създаде, вече не работеше.
Той беше допълнително озадачен от факта, че когато преоразмери прозореца на браузъра си на своя работен плот, сайтът реагираше, но на неговия iPhone се показваше само версията за настолен компютър. Защо един сайт трябва да реагира на настолен компютър и да не реагира на мобилно устройство?
Защо адаптивният дизайн не работи
Адаптивният дизайн спира да работи, когато един ред код липсва в заглавката на HTML файл. Ако този единствен ред код липсва, вашият iPhone, Android и други мобилни устройства ще приемат, че уебсайтът, който разглеждате, е пълноразмерен десктоп сайт и ще коригират размера на viewport , за да обхванете целия екран.
Какво имате предвид под Viewport и Viewport Размер?
На всички устройства размерът на прозореца за изглед се отнася до размера на областта на уеб страница, която в момента е видима за потребителя. Представете си, че държите iPhone 5 с ширина 320 пиксела. Освен ако изрично не е посочено друго, iPhone приема, че всеки уебсайт, който посещавате, е десктоп сайт с ширина 980px.
Сега, използвайки вашия въображаем iPhone 5, вие посещавате уебсайт, предназначен за десктоп, който е широк 800px. Той няма адаптивно оформление, така че вашият iPhone показва настолната версия с пълна ширина.
Не, не е. При размера на прозореца за изглед може да се включи мащабиране. iPhone трябва да намали мащаба, за да види версията на уеб страницата с пълна ширина. Не забравяйте, че прозорецът за изглед се отнася до областта на страницата, която в момента е видима за потребителя. Потребителят на iPhone в момента вижда ли само 320 пиксела от страницата, или вижда версията на пълна ширина?
Точно така: Те виждат уеб страницата с пълна ширина на дисплея си, защото iPhone е приел, че това е поведение по подразбиране: Намалено е, така че потребителят да може да види уеб страница до ширина от 980 пиксела. Следователно прозорецът за изглед на iPhone е 980px.
Когато увеличавате или намалявате, размерът на прозореца за изглед се променя. Преди казахме, че нашият въображаем уебсайт има ширина от 800px, така че ако трябва да увеличите вашия iPhone, така че краищата на уебсайта да докосват краищата на дисплея на вашия iPhone, прозорецът за изглед ще бъде 800px. IPhone може да има прозорец за изглед от 320px на настолен сайт, но ако беше така, ще виждате само малка част от него.
Моят адаптивен уебсайт не работи. Как да го поправя?
Отговорът е един ред HTML, който, когато бъде вмъкнат в заглавката на уеб страница, казва на устройството да зададе прозореца за изглед на собствената си ширина (320px в случая на iPhone 5), а не да мащабира (или мащабирайте) страницата.
За по-техническа дискусия на всички опции, свързани с този мета таг, вижте тази статия на tutsplus.com.
Как да коригирате WordPress X тема, когато не реагира
Обратно към моя приятел от преди: Този един ред код изчезна, когато той актуализира X темата. Когато поправяте вашата, имайте предвид, че X темата не използва само един заглавен файл – тя използва различни заглавни файлове за всеки стек, така че ще трябва да редактирате своя.
Тъй като Ник използва Ethos стека на X тема, той трябваше да добави ред от код, който споменах преди, към заглавния файл, който се намираше в x /frameworks/views/ethos/wp-header.php. Ако използвате различен стек, заменете името на вашия стек (Integrity, Renew и т.н.) с „ethos“, за да намерите правилния заглавен файл. Вмъкнете този един ред и готово! Готови сте.
Значи това коригира и моите CSS медийни заявки?
Когато вмъкнете този ред в заглавката на вашия HTML файл, вашите отзивчиви @media заявки внезапно ще започнат да работят отново и мобилната версия на уебсайта ви ще се върне към живот. Благодаря за четенето и се надявам да помогне!
Remember to Payette Forward, David P.
