Situs Wéb Responsif Kuring Henteu Gawe. Ngalereskeun: Viewport.

My Responsive Website Isn T Working







Cobaan Instrumen Kami Pikeun Ngaluarkeun Masalah

nalika aya anu nyauran anjeun boo

Babaturan kuring nembé ngahubungi kuring pikeun naroskeun bantosan pikeun situs WordPress anu anjeunna bina ngagunakeun téma X. Kliénna parantos nelepon anjeunna énjing éta saatos anjeunna sadar yén halaman wéb na henteu ditingalikeun leres dina iPhone na. Nick mariksa nyalira, sareng pastina, desain responsif anu éndah anu anjeunna rarancang henteu jalan deui.





Anjeunna langkung bingung ku kanyataan yén nalika anjeunna ngarobih ukuran jandela panyungsi na dina desktop na, situs na éta responsif, tapi dina iPhone na, ngan ukur versi desktop anu ditampilkeun. Naha situs bakal responsif dina komputer desktop jeung henteu responsif dina alat sélulér?



Kunaon Desain Responsif Teu Gawe

Desain responsif lirén damel nalika hiji garis kode leungit tina header file HTML. Upami garis kode ieu teu aya, iPhone, Android, sareng alat sélulér anjeun sanés bakal nganggap yén halaman wéb anu anjeun tingali mangrupikeun situs desktop ukuran pinuh sareng ngatur ukuran viewport pikeun nutupan layar sadayana.

Naon Hartosna Anjeun Ku Viewport sareng Ukuran Viewport?

Dina sadaya alat, ukuran viewport nuduhkeun ukuran luas halaman wéb anu ayeuna katingali ku pangguna. Bayangkeun anjeun nyepeng iPhone 5 kalayan lébar 320 piksel. Kacuali sacara eksplisit dicarioskeun sanésna, iPhones nganggap yén unggal halaman wéb anu anjeun sumping mangrupikeun situs desktop kalayan lébar 980px.

Ayeuna, nganggo imajinasi iPhone 5 anjeun,anjeun nganjang halaman wéb anu dirancang pikeun desktop anu lega 800px. Éta henteu ngagaduhan perenah responsif, janten iPhone anjeun mikeun versi desktop anu lengkep.





iphone 6 teras-terasan milari sinyal

Tapi iPhone 5 ngan ukur 320 piksel. Naha éta henteu saukuran ageung viewport na?

Henteu, éta henteu. Kalayan ukuran viewport, skala tiasa aub . IPhone kedah ngazum gede pikeun ningali vérsi lengkep halaman wéb. Émut yén viewport ngarujuk ka daérah halaman anu ayeuna katingali ku pangguna. Naha pangguna iPhone ayeuna ningali ngan 320 piksel halaman, atanapi aranjeunna ningali versi anu lengkep?

Éta leres: Aranjeunna ningali halaman wéb lengkep dina tampilanana kusabab iPhone parantos nganggap éta tingkah laku standar: Éta digedekeun janten pangguna tiasa ningali halaman wéb dugi ka rubak 980 piksel. Ku alatan éta, viewport iPhone urang 980px.

Nalika ngazum gede atanapi ngazum gede, ukuran viewport bakal robih. Kami nyarios sateuacana yén halaman wéb imajinasi kami ngagaduhan lega 800px, janten upami anjeun ngazum gede iPhone anjeun supados ujung halaman wébna némpél kana sisi tampilan iPhone anjeun, viewportna janten 800px. IPhone tiasa gaduh viewport 320px dina situs desktop, tapi upami éta leres, anjeun ngan ukur bakal ningali sakedik bagian na.

telepon anjeun henteu kantos dicadangkeun janten icloud

Situs Wéb Responsif Kuring Rusak. Kumaha Cara Ngalereskeun Éta?

Jawabna mangrupikeun hiji garis HTML anu nalika dilebetkeun kana header halaman wéb ngawartoskeun alat pikeun netepkeun viewport ka lébarna nyalira (320px dina kasus iPhone 5) sareng henteu skala (atanapi ngazum) halaman éta.

Pikeun sawala anu langkung téknis pikeun sadaya pilihan anu aya hubunganana sareng tag meta ieu, parios tulisan ieu dina tutsplus.com .

Kumaha Ngalereskeun Téma WordPress X Nalika Henteu Responsif

Balik deui ka réréncangan abdi ti payun: Baris kode ieu ngaleungit nalika anjeunna ngamutahirkeun tema X. Nalika ngalereskeun anjeun, émut yén téma X henteu ngan ukur nganggo hiji file lulugu - éta nganggo file header anu béda pikeun unggal tumpukan, janten anjeun kedah ngédit anjeun.

kumaha nutup aplikasi nonton apel

Kusabab Nick nganggo tumpukan Étos téma X, anjeunna kedah nambihan garis kode anu kuring nyebatkeun sateuacanna kana file lulugu anu aya dina x /frameworks/views/ethos/wp-header.php . Upami anjeun nganggo tumpukan anu sanés, ngagentos nami tumpukan anjeun (Integritas, Perbarui, jst.) Pikeun 'étos' pikeun milarian file lulugu anu leres. Lebetkeun hiji garis éta, sareng voila! Anjeun saé kanggo angkat.

Janten Ieu Ngalereskeun Pertanyaan Média CSS Kuring, Ogé?

Nalika anjeun ngalebetkeun garis éta dina header file HTML anjeun, query @media responsif anjeun dumadakan bakal mimiti jalan deui sareng vérsi sélulér halaman wéb anjeun bakal hirup deui. Hatur nuhun pikeun maca sareng kuring miharep éta ngabantuan!

Émut ka Payette Teruskeun,
David P.