Responzívna metaznačka Triky CSS

Anonim

Mám tendenciu používať toto:

Aj keď vidím, že sa to veľmi odporúča:

To znamená, že prehliadač (pravdepodobne) vykreslí šírku stránky na šírku vlastnej obrazovky. Ak je teda táto obrazovka široká 320 pixelov, okno prehliadača bude mať šírku 320 pixelov, a nie oddialenie a zobrazenie 960 px (alebo čokoľvek, čo toto zariadenie predvolene robí, namiesto responzívnej metaznačky).

Poznámka: Nepoužívajte responzívne metaznačky, ak váš web nie je špeciálne navrhnutý tak, aby reagoval a pri tejto veľkosti dobre fungoval, pretože to ešte zhoršuje zážitok.

Táto značka podporuje viac atribútov:

Nehnuteľnosť Popis
šírka Šírka virtuálneho výrezu zariadenia.
šírka zariadenia Fyzická šírka obrazovky zariadenia.
výška Výška „virtuálneho výrezu“ zariadenia.
výška zariadenia Fyzická výška obrazovky zariadenia.
počiatočná mierka Počiatočné zväčšenie pri návšteve stránky. 1.0 nezoomuje.
minimálny rozsah Minimálne množstvo, ktoré si návštevník môže stránku priblížiť. 1.0 nezoomuje.
maximálny rozsah Maximálna veľkosť, ktorú môže návštevník stránku priblížiť. 1.0 nezoomuje.
užívateľsky škálovateľné Umožňuje zariadeniu priblížiť a oddialiť. Hodnoty sú áno alebo nie.

Všeobecne sa odporúča, aby ste nezabránili škálovaniu, pretože je to nepríjemné a potenciálne problém s prístupnosťou.

Pravdepodobne to budete chcieť aj vo svojom CSS:

@-ms-viewport( width: device-width; )

Je dobré vedieť: zmena hodnoty tejto metaznačky pomocou JavaScriptu funguje, stránka bude reagovať na novú hodnotu. Celú značku buď vymente, alebo ju vymeňte alebo zmeňte contentvlastnosť. Nie je to veľmi častá potreba, ale môže sa objaviť.