Ipapaliwanag ng blog na ito kung paano gumamit ng viewport meta tag para sa tumutugon na disenyo ng web sa HTML:
Ano ang Viewport Meta Tag?
Ang ' viewport ” ay ang pinakamahalagang tag para gumawa ng tumutugon na disenyo sa pamamagitan ng pagkontrol kung paano lumalabas ang content sa iba't ibang laki ng screen. Ang tag na ito ay inilalagay sa loob ng '
Iba't ibang Katangian ng Viewport Meta Tag
Ang viewport meta tag ay may mga sumusunod na katangian na maaaring ilagay bilang isang halaga para sa ' nilalaman ” attribute:
'lapad' na katangian
Ang ' lapad Tinutukoy ng katangian ng ” ang nakikitang bahagi ng isang webpage para sa nilalaman nang patayo. Ang meta tag nito ay ganito ang hitsura:
< meta pangalan = 'viewport' nilalaman = 'width=device-width' >
'taas' na katangian
Ang ' taas Itinatakda ng katangian ng ” ang patayong haba ng webpage upang matiyak na tumutugma ang taas ng viewport sa taas ng screen. Ang meta tag nito ay ganito ang hitsura:
< meta pangalan = 'viewport' nilalaman = 'taas=400' >
'Initial-scale' attribute
Ang ' Inisyal na sukat Tinitiyak ng katangian ng ” na ang webpage ay ipinapakita sa isang naaangkop na antas ng pag-zoom noong unang na-load. Halimbawa, bisitahin ang code sa ibaba:
< meta pangalan = 'viewport' nilalaman = 'width=device-width, initial-scale=1.0' >'maximum-scale' attribute
Ang ' maximum-scale ” attribute ay tumutukoy sa max zoom level para sa webpage upang maiwasan ang mga isyu sa layout:
< meta pangalan = 'viewport' nilalaman = 'width=device-width, maximum-scale=1.0' >
'minimum-scale' na katangian
Ang ' pinakamababang sukat ' ay ginagamit upang paghigpitan ang user mula sa pag-zoom out nang labis sa pamamagitan ng pagtukoy sa minimum na antas ng zoom-out na sukat:
< meta pangalan = 'viewport' nilalaman = 'width=device-width, minimum-scale=0.5' >'user-scalable' attribute
Ang ' nasusukat ng gumagamit Ang katangian ng ” ay nagbibigay-daan o hindi nagpapahintulot sa user na gawin ang screen ng webpage na mag-zoom out o mag-zoom in sa pamamagitan ng pagtatakda ng value sa “ Hindi 'o' oo ”. Ang meta tag na nagbibigay-daan sa user na mag-zoom in o out ay:
< meta pangalan = 'viewport' nilalaman = 'width=device-width, user-scalable=yes' >Paano Gamitin ang Viewport Meta Tag para sa Responsive Web Design sa HTML?
Upang mas maunawaan ang paggamit ng viewport meta tag para sa tumutugon na disenyo ng web. Maglakad tayo sa isang halimbawa:
Kumbaga sa loob ng ' Pagkatapos ng compilation ng snippet ng code sa itaas, ganito ang hitsura ng webpage: Ipinapakita ng output na hindi tumutugon ang nilalaman dahil hindi ito perpektong ipinapakita sa maliliit na device. Ngayon upang gawin itong tumutugon idagdag ang ' viewport ” meta tag: Pagkatapos i-update ang code, ganito ang hitsura ng webpage sa iba't ibang laki ng screen: Ang huling output ay naglalarawan na ang webpage ay tumutugon na ngayon pagkatapos ng pagdaragdag ng isang meta tag sa loob ng ' Ang viewport meta tag ay nagbibigay-daan sa developer na magbigay ng isang set ng mga tagubilin sa browser na nagtatakda kung paano ipinapakita ang webpage sa iba't ibang laki ng screen na device. Ang meta tag ay inilalagay sa loob ng “ 'tag: < div >
< p >
< b > Pinapatakbo ng Linuxhint, para mas maunawaan ang viewport meta tag buksan ang webpage sa ibang Screen laki mga device.< / b >
< / p >
< img src = '../bg.jpg' lahat = 'Hacker' lapad = '460' taas = '3. 4. 5' >
< p istilo = 'padding:5px' >
< i >Sumali sa Linuxhint Team < / i >
Pinapatakbo ng Linuxhint, para mas maunawaan ang viewport meta tag buksan ang webpage sa ibang Screen laki mga device. Pinapatakbo ng Linuxhint, para mas maunawaan ang viewport meta tag buksan ang webpage sa ibang Screen laki mga device. Pinapatakbo ng Linuxhint, para mas maunawaan ang viewport meta tag buksan ang webpage sa ibang Screen laki mga device. Pinapatakbo ng Linuxhint, para mas maunawaan ang viewport meta tag buksan ang webpage sa ibang Screen laki mga device.
< / p >
< / div >
< meta pangalan = 'viewport' nilalaman = 'width=device-width, initial-scale=1.0' / >
< / ulo >
Konklusyon