Ez a blog elmagyarázza, hogyan kell használni a viewport metacímkét az adaptív webdizájnhoz HTML-ben:
Mi az a Viewport metacímke?
A ' nézetablak ” a legfontosabb címke a reszponzív dizájn létrehozásához azáltal, hogy szabályozza, hogy a tartalom hogyan jelenjen meg a különböző képernyőméreteken. Ez a címke a „
A Viewport metacímke különböző attribútumai
A nézetablak metacímke a következő attribútumokkal rendelkezik, amelyek értékeként helyezhetők el a ' tartalom ' tulajdonság:
„szélesség” attribútum
A ' szélesség ” attribútum határozza meg a weboldal látható területét a tartalom számára függőlegesen. A metacímkéje így néz ki:
< meta név = 'nézőablak' tartalom = 'width=device-width' >
„magasság” attribútum
A ' magasság ” attribútum beállítja a weboldal függőleges hosszát, hogy a nézetablak magassága megegyezzen a képernyő magasságával. A metacímkéje így néz ki:
< meta név = 'nézőablak' tartalom = 'magasság = 400' >
„Kezdeti méretarány” attribútum
A ' Kezdeti méretarány ” attribútum biztosítja, hogy a weboldal az első betöltéskor megfelelő nagyítási szinten jelenjen meg. Látogassa meg például az alábbi kódot:
< meta név = 'nézőablak' tartalom = 'szélesség = eszköz szélessége, kezdeti méret = 1,0' >„maximális léptékű” attribútum
A ' maximális léptékű ” attribútum határozza meg a weboldal maximális nagyítási szintjét az elrendezési problémák elkerülése érdekében:
< meta név = 'nézőablak' tartalom = 'szélesség = eszköz szélessége, maximális méret = 1,0' >
„minimális léptékű” attribútum
A ' minimális léptékű ” funkció arra szolgál, hogy a minimális kicsinyítési szint megadásával korlátozza a felhasználót a túlzott kicsinyítéstől:
< meta név = 'nézőablak' tartalom = 'szélesség = eszköz szélessége, minimális méretarány = 0,5' >„felhasználói méretezhető” attribútum
A ' felhasználó által méretezhető ” attribútum lehetővé teszi vagy nem teszi lehetővé a felhasználó számára a weboldal képernyőjének kicsinyítését vagy nagyítását a „ értékre állítva Nem ” vagy „ Igen ”. A metacímke, amely lehetővé teszi a felhasználó számára a nagyítást vagy kicsinyítést:
< meta név = 'nézőablak' tartalom = 'width=device-width, user-scalable=yes' >Hogyan használhatjuk a Viewport metacímkét a reszponzív webdesignhoz HTML-ben?
A nézetablak metacímke reszponzív webdizájn használatának jobb megértése. Menjünk végig egy példán:
Tegyük fel, hogy a „ A fenti kódrészlet összeállítása után a weboldal így néz ki: A kimenet azt jelzi, hogy a tartalom nem reagál, mivel nem jelenik meg tökéletesen kis eszközökön. Most, hogy érzékeny legyen, adja hozzá a „ nézetablak ” meta tag: A kód frissítése után a weboldal így néz ki különböző képernyőméreteken: Az utolsó kimenet azt mutatja, hogy a weboldal most már reszponzív, miután hozzáadott egy metacímkét a „ A nézetablak metacímke lehetővé teszi a fejlesztő számára, hogy utasításokat adjon a böngészőnek, amelyek beállítják, hogy a weboldal hogyan jelenjen meg a különböző képernyőméretű eszközökön. A metacímke a „ ” címke: < div >
< p >
< b >A Linuxhint által üzemeltetett, a nézetablak metacímkéjének jobb megértéséhez nyissa meg a weboldalt egy másik képernyőn méret eszközök.< / b >
< / p >
< img src = '../bg.jpg' minden = 'Hacker' szélesség = '460' magasság = '3. 4. 5' >
< p stílus = 'padding:5px' >
< én >Csatlakozzon a Linuxhint csapatához < / én >
A Linuxhint által üzemeltetett, a nézetablak metacímkéjének jobb megértéséhez nyissa meg a weboldalt egy másik képernyőn méret eszközök. A Linuxhint által üzemeltetett, a nézetablak metacímkéjének jobb megértéséhez nyissa meg a weboldalt egy másik képernyőn méret eszközök. A Linuxhint által üzemeltetett, a nézetablak metacímkéjének jobb megértéséhez nyissa meg a weboldalt egy másik képernyőn méret eszközök. A Linuxhint által üzemeltetett, a nézetablak metacímkéjének jobb megértéséhez nyissa meg a weboldalt egy másik képernyőn méret eszközöket.
< / p >
< / div >
< meta név = 'nézőablak' tartalom = 'szélesség = eszköz szélessége, kezdeti méret = 1,0' / >
< / fej >
Következtetés