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