Reszponzív metacímke - CSS-trükkök

Anonim

Ezt szoktam használni:

Bár úgy látom, ezt nagyon ajánlják:

Ez azt jelenti, hogy a böngésző (valószínűleg) az oldal szélességét a saját képernyőjének szélességén adja meg. Tehát, ha ez a képernyő 320 képpont széles, akkor a böngésző ablaka 320 képpont széles lesz, ahelyett, hogy kicsinyítené, és 960 képpontos felbontást mutatna (vagy bármit is csinál az eszköz alapértelmezés szerint egy érzékeny metacímke helyett).

Megjegyzés: Ne használjon adaptív metacímkét, ha webhelyét nem kifejezetten reagálásra tervezték, és akkora méretben is jól működik, mert ez rontja az élményt.

További attribútumok vannak, amelyeket ez a címke támogat:

Ingatlan Leírás
szélesség Az eszköz virtuális nézetablakjának szélessége.
eszközszélesség Az eszköz képernyőjének fizikai szélessége.
magasság Az eszköz „virtuális nézetablakának” magassága.
eszköz-magasság A készülék képernyőjének fizikai magassága.
kezdeti lépték A kezdeti nagyítás az oldal felkeresésekor. Az 1.0 nem nagyít.
minimális skála Az a minimális összeg, amelyet a látogató nagyíthat az oldalon. Az 1.0 nem nagyít.
maximális skála Az a maximális összeg, amelyet a látogató nagyíthat az oldalon. Az 1.0 nem nagyít.
felhasználó által skálázható Lehetővé teszi a készülék nagyítását és kicsinyítését. Az értékek igen vagy nem.

Általában javasoljuk, hogy ne akadályozza meg a méretezést, mivel ez bosszantó és potenciálisan akadálymentességi problémát jelent.

Valószínűleg ezt is szeretné a CSS-ben:

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

Jó tudni: ennek a metacímkének az értékének JavaScript-sel történő megváltoztatása működik, az oldal reagál az új értékre. Vagy írja ki a teljes címkét, és cserélje ki, vagy változtassa meg a contenttulajdonságot. Nem túl gyakori igény, de felmerülhet.