Менин жооптуу вебсайтым иштебей жатат. Түзөтүү: Viewport.

My Responsive Website Isn T Working







Кыйынчылыктарды Жоюу Үчүн Биздин Аспапты Байкап Көрүңүз

жумуш сунуш форматы

Менин досум жакында X темасын колдонуп курган WordPress сайты боюнча жардам сурап кайрылды. Кардары ошол күнү эртең менен анын веб-сайты iPhone'до туура көрсөтүлбөй жаткандыгын байкагандан кийин ага телефон чалган. Ник аны өзү текшерип чыгып, анын иштеп чыккан кооз сезгич дизайны эми иштебей калды.





Ал өзүнүн жумушчу столундагы браузердин терезесинин өлчөмүн өзгөрткөндө, ал сайтты дагы жашырган болгон сезимтал, бирок анын iPhone'унда рабочий версия гана көрсөтүлдү. Эмне үчүн сайт болмок рабочий компьютерде жооп берет жана мобилдик түзмөктө жооп бербейби?



Эмне үчүн жооптуу дизайн иштебейт

HTML файлынын аталышында коддун бир сабы жок болуп калса, жооптуу дизайн иштебей калат. Эгер ушул бир сап коду жок болсо, iPhone, Android жана башка мобилдик түзмөктөрүңүз сиз көрүп жаткан веб-сайт толук көлөмдөгү иш такта сайты деп эсептеп, көрүү терезеси экранды толугу менен камтууга.

Визпорт жана порттун көлөмү деген эмнени билдирет?

Бардык түзмөктөрдө көрүү терезесинин көлөмү колдонуучуга учурда көрүнүп турган веб-баракчанын аянтын билдирет. Сизде туурасы 320 пиксел болгон iPhone 5 кармалгандыгын элестетип көрсөңүз. Эгерде башкача айтылбаса, iPhone'дор сиз кирген ар бир веб-сайт 980px кеңдиктеги иш такта сайты деп эсептешет.

Эми, элестеткен iPhone 5 колдонуп,сиз 800px кеңдиктеги жумушчу стол үчүн иштелип чыккан веб-сайтка киресиз. Анын сезгич жайгашуусу жок, андыктан iPhone'уңуз иш столунун толук кеңдигин көрсөтөт.





iphone сактоо башка эмне

Бирок iPhone 5тин кеңдиги болгону 320 пиксель. Дайыма көрүү терезесинин көлөмү эмеспи?

Жок андай эмес. Көрүү терезесинин өлчөмү менен, масштабдаштыруу тартылышы мүмкүн . Веб-баракчанын толук кеңдиктеги нускасын көрүү үчүн iPhone көлөмүн кичирейтиши керек. Эсиңизде болсун, көрүү терезеси колдонуучунун учурда көрүнүп турган бетинин аянтын билдирет. Учурда iPhone колдонуучусу баракчанын болгону 320 пикселин көрүп жатабы же толук кеңдиктеги нускасын көрүп жатабы?

Туура: Алар iPhone'дун демейки жүрүм-туруму деп эсептешкендиктен, алардын дисплейиндеги толук кеңдиктеги веб-баракчаны көрүп жатышат: Колдонуучу 980 пикселдик кеңдикке чейин веб-баракчаны көрө алат. Демек, iPhone’дун көрүү терезеси 980px түзөт.

Чоңойтуп же кичирейткенде, көрүү терезесинин көлөмү өзгөрөт. Мурда биз кыялданган вебсайтыбыз 800px кеңдикке ээ деп айтканбыз, андыктан вебсайтыңыздын четтери iPhone'уңуздун дисплейинин четине тийип тургандай кылып iPhone'уңузду чоңойткондо, көрүү аянты 800px болот. IPhone мүмкүн стол сайтында 320px аянтка ээ, бирок андай болсо, анын бир аз гана бөлүгүн көрө аласыз.

iphone 4s wifi туруктуу оңдоону чечти

Менин жооптуу вебсайтым бузулду. Мен аны кантип чечүү керек?

Жооп веб-барактын башына киргизилгенде, түзмөктүн көрүү аянтын өзүнүн кеңдигине (IPhone 5 үчүн 320px) орнотуп, барактын масштабын (же масштабын) көтөрбө деп айткан бир HTML сабынан турат.

Ушул мета тэгге байланыштуу бардык варианттарды техникалык талкуулоо үчүн, текшерип көрүңүз tutsplus.com сайтындагы бул макала .

WordPress X Theme жооп бербеген учурда кантип оңдоо керек

Мурунку досума кайтып келсем: Ушул бир сап код X темасын жаңыртканда жоголуп кетти. Өзүңүздүкүн оңдоодо, X темасы бир гана баш файлын колдонбоорун эсиңизден чыгарбаңыз - анда ар бир стек үчүн ар башка аталыштагы файлдар колдонулат, андыктан сиздикин өзгөртүшүңүз керек болот.

iphone 6да тиркемелерди кантип жүктөө керек

Ник X темасынын Ethos стекин колдонгондуктан, ал x ичинде жайгашкан баш файлга мен айткан коддун сабын кошушу керек болчу. /frameworks/views/ethos/wp-header.php . Эгерде сиз башка стекти колдонсоңуз, анда туура баш файлын табуу үчүн, стектин атын (Бүтүндүгү, Жаңыртуу ж.б.) ‘ethos’ менен алмаштырыңыз. Ошол бир сапты киргизип, voila! Сиз барганыңыз жакшы.

Демек, бул менин CSS медиа суроолорумду оңдойбу?

Ошол сапты HTML файлыңыздын башына киргизгенде, @media жооп берген суроолоруңуз күтүлбөгөн жерден кайрадан иштей баштайт жана веб-сайтыңыздын мобилдик версиясы кайрадан калыбына келет. Окуганыңыз үчүн рахмат жана жардам берет деп ишенем!

Payette Forward эсиңизде болсун,
Дэвид П.