Мой сябар нядаўна звязаўся са мной і папрасіў дапамагчы з сайтам WordPress, які ён стварыў з выкарыстаннем тэмы X. Яго кліент патэлефанаваў яму раніцай пасля таго, як ён заўважыў, што яго сайт не адлюстроўваецца на яго iPhone. Нік праверыў гэта сам, і, безумоўна, выдатны спагадны дызайн, які ён распрацаваў, ужо не працаваў.
Далей ён быў занепакоены тым, што пры змене памеру акна аглядальніка на працоўным стале сайта было спагадны, але на яго iPhone адлюстроўвалася толькі настольная версія. Навошта сайт спагадны на настольным кампутары і не рэагуе на мабільнай прыладзе?
Чаму спагадны дызайн не працуе
Спагадны дызайн перастае працаваць, калі ў загалоўку файла HTML адсутнічае адзін радок кода. Калі гэты адзіны радок кода адсутнічае, вашы iPhone, Android і іншыя мабільныя прылады будуць лічыць, што вэб-сайт, які вы праглядаеце, з'яўляецца поўнапамерным настольным сайтам і карэктуе памер агляд каб ахапіць увесь экран.
Што вы маеце на ўвазе пад аглядам і памерам агляднай вобласці?
На ўсіх прыладах памер відарыса адносіцца да памеру вобласці вэб-старонкі, якая ў дадзены момант бачная карыстальніку. Уявіце, вы трымаеце ў руках iPhone 5 шырынёй 320 пікселяў. Калі ясна не сказана іншае, айфоны мяркуюць, што кожны вэб-сайт, які вы наведваеце, з'яўляецца настольным сайтам шырынёй 980 пікс.
Цяпер, выкарыстоўваючы ваш уяўны iPhone 5,вы наведваеце вэб-сайт, распрацаваны для настольных ПК, шырынёй 800 пікс. У яго няма адаптыўнай раскладкі, таму ваш iPhone адлюстроўвае поўнашырынную настольную версію.
Зарадная прылада iphone не падтрымліваецца
Але iPhone 5 мае толькі 320 пікселяў у шырыню. Ці не заўсёды гэта памер відарыса?
Не, гэта не так. З памерам аглядавай вобласці, можа быць задзейнічана маштабаванне . IPhone павінен паменшыць, каб убачыць поўную шырыню вэб-старонкі. Памятаеце, што агляд праглядае вобласць старонкі, якую ў дадзены момант бачыць карыстальнік. У цяперашні час карыстальнік iPhone бачыць толькі 320 пікселяў старонкі, альбо бачыць поўнашырынную версію?
Правільна: на сваім дысплеі яны бачаць вэб-старонку поўнай шырыні, таму што iPhone выказаў здагадку, што гэта паводзіны па змаўчанні: яна зменшана, каб карыстальнік мог праглядаць вэб-старонку шырынёй да 980 пікселяў. Такім чынам, агляд iPhone складае 980 пікселяў.
Па меры павелічэння або памяншэння маштабу памер відарыса змяняецца. Раней мы ўжо казалі, што наш уяўны вэб-сайт мае шырыню 800 пікселяў, таму, калі вы хочаце павялічыць свой iPhone так, каб краю вэб-сайта датычыліся краёў дысплея вашага iPhone, вобласць прагляду будзе 800 пікселяў. IPhone можа мець агляд 320px на працоўным стале, але калі б ён з'явіўся, вы ўбачылі б толькі невялікую частку.
мой экран iphone x стаў чорным
Мой спагадны вэб-сайт сапсаваны. Як гэта выправіць?
Адказ - адзін радок HTML, які пры ўстаўцы ў загаловак вэб-старонкі кажа прыладзе ўсталяваць вобласць прагляду на ўласную шырыню (320 пікс. У выпадку iPhone 5), а не маштабаваць (маштабаваць) старонку.
Для больш тэхнічнага абмеркавання ўсіх варыянтаў, звязаных з гэтым метатэгам, праверце гэты артыкул на tutsplus.com .
Як выправіць тэму WordPress X, калі яна не рэагуе
Вернемся да майго сябра раней: гэты адзін радок кода знік, калі ён абнавіў тэму X. Выпраўляючы свой, майце на ўвазе, што ў тэме X выкарыстоўваецца не толькі адзін загаловачны файл - ён выкарыстоўвае розныя загалоўковыя файлы для кожнага стэка, таму вам прыйдзецца рэдагаваць свой.
Чаму мой тэлефон не зараджаецца па бесправадной сетцы?
Паколькі Нік выкарыстоўвае стэк Ethos X-тэмы, яму прыйшлося дадаць радок кода, пра які я ўжо згадваў, у загаловачны файл, які знаходзіўся ў х /frameworks/views/ethos/wp-header.php . Калі вы выкарыстоўваеце іншы стэк, заменіце імя свайго стэка (Integrity, Renew і г.д.) на 'ethos', каб знайсці правільны загаловачны файл. Устаўце адзін радок і вуаля! Вам добра ехаць.
Такім чынам, гэта выпраўляе і мае CSS-запыты ў СМІ?
Калі вы ўставіце гэты радок у загаловак HTML-файла, вашы аператыўныя запыты @media раптам зноў пачнуць працаваць, і мабільная версія вашага сайта ажыве. Дзякуй за чытанне, і я спадзяюся, што гэта дапаможа!
Памятайце пра Payette Forward,
Дэвід П.