Tento blog vysvětlí, jak používat metaznačku viewport pro responzivní webový design v HTML:
Co je to Viewport Meta Tag?
' výřez “ je nejdůležitější tag pro vytvoření responzivního designu řízením toho, jak se obsah zobrazí na různých velikostech obrazovky. Tato značka je umístěna uvnitř „
Různé atributy metaznačky Viewport
Metaznačka viewport má následující atributy, které lze umístit jako hodnotu pro „ obsah ' atribut:
atribut „šířka“.
' šířka Atribut ” určuje svisle viditelnou oblast webové stránky pro obsah. Jeho meta tag vypadá takto:
< meta název = 'výřez' obsah = 'width=device-width' >
atribut „výška“.
' výška ” nastavuje vertikální délku webové stránky, aby se zajistilo, že výška zobrazované oblasti odpovídá výšce obrazovky. Jeho meta tag vypadá takto:
< meta název = 'výřez' obsah = 'výška=400' >
Atribut „Initial-scale“.
' Počáteční měřítko ” zajišťuje, že se webová stránka při prvním načtení zobrazí s odpovídající úrovní přiblížení. Navštivte například níže uvedený kód:
< meta název = 'výřez' obsah = 'width=device-width, initial-scale=1.0' >atribut „maximální měřítko“.
' maximální měřítko Atribut ” určuje maximální úroveň přiblížení pro webovou stránku, aby se předešlo problémům s rozložením:
< meta název = 'výřez' obsah = 'width=device-width, maximum-scale=1.0' >
atribut „minimální měřítko“.
' minimální měřítko ” se používá k omezení uživatele v přílišném oddálení zadáním minimální úrovně měřítka oddálení:
< meta název = 'výřez' obsah = 'width=device-width, minimum-scale=0.5' >atribut „user-scalable“.
' uživatelsky škálovatelné Atribut ” umožňuje nebo neumožňuje uživateli oddálit nebo přiblížit obrazovku webové stránky nastavením hodnoty na “ Ne “ nebo „ Ano “. Metaznačka, která uživateli umožňuje přiblížit nebo oddálit, je:
< meta název = 'výřez' obsah = 'width=device-width, user-scalable=yes' >Jak používat Viewport Meta Tag pro responzivní webový design v HTML?
Chcete-li lépe porozumět použití metaznačky viewport pro responzivní webový design. Pojďme si projít příklad:
Předpokládejme uvnitř „ Po kompilaci výše uvedeného fragmentu kódu vypadá webová stránka takto: Výstup ukazuje, že obsah nereaguje, protože se na malých zařízeních nezobrazuje dokonale. Nyní, aby byla responzivní, přidejte „ výřez ” meta tag: Po aktualizaci kódu vypadá webová stránka na různých velikostech obrazovky takto: Konečný výstup ukazuje, že webová stránka nyní reaguje po přidání metaznačky do „ Metaznačka viewport umožňuje vývojáři poskytnout prohlížeči sadu pokynů, které nastaví, jak se webová stránka zobrazí na zařízeních s různou velikostí obrazovky. Metaznačka je umístěna uvnitř „ značka ”: < div >
< p >
< b >Používá Linuxhint, abyste lépe porozuměli metaznačce viewport, otevřete webovou stránku na jiné obrazovce velikost zařízení.< / b >
< / p >
< img src = '../bg.jpg' všechno = 'hacker' šířka = '460' výška = '3. 4. 5' >
< p styl = 'padding:5px' >
< i >Připojte se k týmu Linuxhint < / i >
Používá Linuxhint, abyste lépe porozuměli metaznačce viewport, otevřete webovou stránku na jiné obrazovce velikost zařízení. Používá Linuxhint, abyste lépe porozuměli metaznačce zobrazení, otevřete webovou stránku na jiné obrazovce velikost zařízení. Používá Linuxhint, abyste lépe porozuměli metaznačce zobrazení, otevřete webovou stránku na jiné obrazovce velikost zařízení. Používá Linuxhint, abyste lépe porozuměli metaznačce zobrazení, otevřete webovou stránku na jiné obrazovce velikost zařízení.
< / p >
< / div >
< meta název = 'výřez' obsah = 'width=device-width, initial-scale=1.0' / >
< / hlava >
Závěr