Еден мој пријател неодамна ме контактираше за да побара помош за веб-страница на WordPress што ја изгради со користење на темата Х. Неговиот клиент му се јавил тоа утро откако забележал дека неговата веб-страница не се прикажува правилно на неговиот iPhone. Ник сам го провери, и доволно сигурен, прекрасниот одговорен дизајн што го дизајнираше не работи веќе.
Тој дополнително беше мистифициран од фактот дека кога ја смени големината на прозорецот на прелистувачот на неговата работна површина, страницата беше одговора, но на неговиот iPhone беше прикажана само десктоп верзијата. Зошто би била некоја страница одговорен на десктоп компјутер и не реагира на мобилен уред?
Зошто одговорен дизајн не работи
Одговорениот дизајн престанува да работи кога недостасува една линија на код во заглавието на HTML-датотеката. Доколку недостасува оваа единствена линија на код, вашиот iPhone, Android и други мобилни уреди ќе претпостават дека веб-страницата што ја гледате е веб-страница за целосна големина и ја прилагодува големината на преглед да го опфати целиот екран.
Што мислите со поглед и големина на преглед?
На сите уреди, големината на прегледот се однесува на големината на површината на една веб-страница што е моментално видлива за корисникот. Замислете дека држите iPhone 5 со ширина од 320 пиксели. Освен ако не е експлицитно кажано поинаку, iPhone телефоните претпоставуваат дека секоја веб-страница што ја посетувате е десктоп-страница со ширина од 980px.
Сега, користејќи го вашиот замислен iPhone 5,посетувате веб-страница дизајнирана за работна површина, ширина 800px. Нема одговорен распоред, така што вашиот iPhone ја прикажува десктоп-верзијата со целосна ширина.
часовник на Apple 4 батеријата
Но, iPhone 5 е широк само 320 пиксели. Зарем тоа не е секогаш големината на прегледот?
Не, не е Со големина на порта, може да биде вклучено скалирање . IPhone мора да зумира за да ја види верзијата на целата веб-страница со целосна ширина. Запомнете дека прегледот се однесува на областа на страницата што е моментално видлива за корисникот. Дали корисникот на iPhone во моментов гледа само 320 пиксели на страницата или ја гледа верзијата со целосна ширина?
Така е: Тие ја гледаат веб-страницата со целосна ширина на нивниот дисплеј затоа што iPhone претпостави дека е стандардно однесување: Зумиран е за да може корисникот да гледа веб-страница до ширина од 980 пиксели. Затоа, прегледот на iPhone е 980px.
Како што зумирате или одзумирате, големината на прегледот се менува. Претходно рековме дека нашата замислена веб-страница има ширина од 800px, па ако треба да го зумирате вашиот iPhone така што рабовите на веб-страницата ќе ги допираат рабовите на екранот на вашиот iPhone, портот за преглед ќе биде 800px. IPhone-от може имаат преглед од 320px на десктоп-страница, но ако има, ќе гледате само мал дел од тоа.
зошто моите апликации постојано се затвораат на мојот iPhone
Мојата одговорна веб-страница е скршена. Како да го поправам?
Одговорот е единечна линија на HTML што кога е вметната во заглавието на веб-страница, му кажува на уредот да го постави портата за гледање на сопствената ширина (320px во случај на iPhone 5) и да не ја шири (или зумира) страницата.
За повеќе техничка дискусија за сите опции поврзани со оваа мета-ознака, проверете овој напис на tutsplus.com .
Како да ја поправите темата WordPress X кога не одговара
Вратете се на мојот пријател од порано: Оваа линија на код исчезна кога ја ажурираше X-темата. Кога ги поправате своите, имајте во предвид дека темата X не користи само една датотека заглавие - таа користи различни датотеки заглавија за секој оџак, така што ќе мора да ги уредувате вашите.
синхронизирајте белешки од Mac на iPhone
Бидејќи Ник ја користи темата Ethos stack of X, тој мораше да додаде линија на код што ја спомнав претходно во датотеката со заглавие што се наоѓаше во x /frameworks/views/ethos/wp-header.php . Ако користите друг стек, заменете го името на вашиот оџак (интегритет, обновување, итн.) За „етос“ за да ја пронајдете точната датотека за заглавие. Вметнете ја таа една линија и воила! Добро си да одиш
Значи, ова ги поправа прашањата за мојот медиум во CSS, премногу?
Кога ќе ја вметнете таа линија во заглавието на вашата HTML-датотека, вашите одговорни пребарувања @media одеднаш ќе започнат повторно да работат и мобилната верзија на вашата веб-страница ќе оживее. Ви благодариме за читањето и се надевам дека ќе ви помогне!
Запомнете дека Пајет напред,
Дејвид П.