Masalah utama anu patali jeung HTML ngarobah viewport kana ukuran smartphone téh nya éta bisa ngabalukarkeun ramatloka pikeun jadi unresponsive atawa tampilan salah. Ieu kusabab nalika viewport dirobih, halaman wéb moal tiasa dioptimalkeun pikeun ukuran layar anu langkung alit sareng henteu tiasa leres ngirangan eusina. Salaku tambahan, sababaraha fitur tiasa henteu jalan leres dina ukuran layar anu langkung alit, sapertos ménu navigasi atanapi elemen interaktif.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1. Baris kode ieu meta tag, nu nyadiakeun informasi ngeunaan dokumen HTML kana browser nu.
2. Ngaran atribut disetel ka "viewport", nu ngabejaan browser nu tag ieu ngandung émbaran ngeunaan kumaha kaca kudu dipintonkeun dina alat béda.
3. Atribut eusi disetel ka "lebar = alat-lebar, skala awal = 1.0", nu ngabejaan browser nu eta kudu make lebar alat salaku rubak kaca jeung skala eta kaluhur atanapi kahandap ti dinya lamun perlu.
Daptar eusi
Desain Wéb responsif
Desain wéb responsif mangrupikeun pendekatan kana desain wéb anu ngajantenkeun halaman wéb kalayan saé dina sababaraha alat sareng ukuran jandela atanapi layar. It uses kombinasi grids fléksibel tur layouts, gambar na hiji pamakéan calakan queries média CSS. Situs wéb anu responsif dirancang pikeun nyayogikeun pangalaman ningali anu optimal — maca sareng navigasi anu gampang kalayan pangropéa ukuran minimum, panning, sareng ngagulung — dina rupa-rupa alat (tina monitor komputer desktop ka telepon sélulér).
Dina HTML, desain responsif tiasa dihontal ku ngagunakeun téknik ieu:
• grids fléksibel - Ngagunakeun unit relatif kayaning percentages atanapi ems tinimbang unit dibereskeun-lebar kawas piksel pikeun elemen perenah ngamungkinkeun pikeun kaca flexibly adaptasi jeung ukuran layar béda.
• Média queries - CSS3 queries média ngidinan pamekar pikeun nangtukeun gaya béda pikeun rubak alat béda. Hal ieu ngamungkinkeun perenah halaman pikeun nyaluyukeun sasuai gumantung kana alat anu dianggo.
• Gambar responsif - Gambar bisa dijieun responsif ku ngagunakeun atribut srcset dina HTML5 anu ngamungkinkeun pamekar pikeun nangtukeun sababaraha versi hiji gambar dina resolusi béda pikeun alat béda.
• video fléksibel - Video ogé bisa dijieun responsif ku ngagunakeun sipat obyék-fit dina CSS nu ngidinan pamekar pikeun nangtukeun sabaraha video kedah skala dina wadahna gumantung kana ukuranana.
Tag meta viewport
Tag meta viewport mangrupikeun unsur HTML anu nyarioskeun ka browser kumaha nyaluyukeun ukuran halaman sareng skala pikeun nyocogkeun ka alat anu dianggo. Hal ieu dianggo pikeun ngadalikeun kumaha tampilan halaman wéb dina alat anu béda, sapertos smartphone sareng tablet. Tag meta viewport tiasa dianggo pikeun nyetél lebar halaman wéb, skala kaluhur atanapi kahandap, sareng nangtukeun naha pangguna diidinan ngazum ageung atanapi ngaleutikan. Éta ogé tiasa dianggo pikeun nyetél skala awal, skala maksimal, pasipatan anu tiasa skala pangguna, sareng seueur deui.
Kumaha carana sangkan ramatloka abdi pas layar telepon abdi
Pikeun ngajantenkeun halaman wéb pas kana layar telepon dina HTML, anjeun tiasa nganggo tag meta viewport. Tag ieu ngamungkinkeun anjeun ngadalikeun kumaha halaman wéb anjeun dipintonkeun dina alat anu béda. Anjeun tiasa nyetél lebar viewport janten sami sareng lebar alat, ku kituna halaman wéb anjeun bakal otomatis nyaluyukeun ukuranana pikeun nyocogkeun kana layar alat naon waé. Salaku tambahan, anjeun ogé tiasa nganggo pamundut média dina kode CSS anjeun pikeun langkung ngaropea kumaha tampilan halaman wéb anjeun dina alat anu béda.
