Ang pangunahing problema na nauugnay sa pagbabago ng viewport ng HTML sa laki ng smartphone ay maaari itong maging sanhi ng website na maging hindi tumutugon o hindi maipakita nang tama. Ito ay dahil kapag binago ang viewport, maaaring hindi ma-optimize ang website para sa mas maliit na laki ng screen at maaaring hindi maayos na bawasan ang nilalaman nito. Bukod pa rito, maaaring hindi gumana nang tama ang ilang feature sa mas maliit na laki ng screen, gaya ng mga navigation menu o interactive na elemento.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1. Ang linya ng code na ito ay isang meta tag, na nagbibigay ng impormasyon tungkol sa HTML na dokumento sa browser.
2. Ang attribute ng pangalan ay nakatakda sa "viewport", na nagsasabi sa browser na ang tag na ito ay naglalaman ng impormasyon tungkol sa kung paano dapat ipakita ang page sa iba't ibang device.
3. Nakatakda ang attribute ng content sa “width=device-width, initial-scale=1.0”, na nagsasabi sa browser na dapat nitong gamitin ang lapad ng device bilang lapad ng page at i-scale ito pataas o pababa mula doon kung kinakailangan.
Nakikiramay na Disenyo sa Web
Ang tumutugon na disenyo ng web ay isang diskarte sa disenyo ng web na ginagawang mahusay ang pag-render ng mga web page sa iba't ibang device at laki ng window o screen. Gumagamit ito ng kumbinasyon ng mga nababaluktot na grid at mga layout, mga larawan at isang matalinong paggamit ng mga query sa media ng CSS. Ang mga tumutugon na website ay idinisenyo upang magbigay ng pinakamainam na karanasan sa panonood—madaling pagbabasa at pag-navigate na may kaunting pagbabago sa laki, pag-pan, at pag-scroll—sa malawak na hanay ng mga device (mula sa mga monitor ng desktop computer hanggang sa mga mobile phone).
Sa HTML, ang tumutugon na disenyo ay maaaring makamit sa pamamagitan ng paggamit ng mga sumusunod na pamamaraan:
• Mga flexible na grid – Ang paggamit ng mga kamag-anak na unit gaya ng mga porsyento o ems sa halip na mga fixed-width na unit tulad ng mga pixel para sa mga elemento ng layout ay nagbibigay-daan sa page na madaling umangkop sa iba't ibang laki ng screen.
• Mga query sa media – Binibigyang-daan ng mga query ng CSS3 media ang mga developer na tumukoy ng iba't ibang istilo para sa iba't ibang lapad ng device. Nagbibigay-daan ito sa layout ng page na mag-adjust nang naaayon depende sa device na ginagamit.
• Mga tumutugon na larawan – Maaaring gawing tumutugon ang mga larawan sa pamamagitan ng paggamit ng srcset attribute sa HTML5 na nagbibigay-daan sa mga developer na tumukoy ng maramihang bersyon ng isang larawan sa iba't ibang resolution para sa iba't ibang device.
• Mga flexible na video – Ang mga video ay maaari ding gawing tumutugon sa pamamagitan ng paggamit ng object-fit property sa CSS na nagbibigay-daan sa mga developer na tukuyin kung paano dapat mag-scale ang mga video sa loob ng kanilang mga container depende sa kanilang laki.
Viewport meta tag
Ang viewport meta tag ay isang HTML element na nagsasabi sa browser kung paano isaayos ang mga sukat at scaling ng page upang umangkop sa device na ginagamit. Ito ay ginagamit upang kontrolin ang hitsura ng isang web page sa iba't ibang device, gaya ng mga smartphone at tablet. Maaaring gamitin ang viewport meta tag upang itakda ang lapad ng isang web page, i-scale ito pataas o pababa, at tukuyin kung pinapayagan o hindi ang mga user na mag-zoom in o out. Magagamit din ito para magtakda ng paunang sukat, maximum-scale, mga property na nasusukat ng user, at higit pa.
Paano ko gagawing magkasya ang aking website sa screen ng aking telepono
Upang gawing magkasya ang isang website sa isang screen ng telepono sa HTML, maaari mong gamitin ang viewport meta tag. Nagbibigay-daan sa iyo ang tag na ito na kontrolin kung paano ipinapakita ang iyong website sa iba't ibang device. Maaari mong itakda ang lapad ng viewport na katumbas ng lapad ng device, upang awtomatikong ayusin ng iyong website ang laki nito upang magkasya sa screen ng anumang device. Bukod pa rito, maaari mo ring gamitin ang mga query sa media sa iyong CSS code upang higit pang i-customize ang hitsura ng iyong website sa iba't ibang device.
