Zwykle używam tego:
Chociaż widzę, że jest to bardzo zalecane:
Oznacza to, że przeglądarka (prawdopodobnie) wyrenderuje szerokość strony na szerokości własnego ekranu. Więc jeśli ten ekran ma szerokość 320 pikseli, okno przeglądarki będzie szerokie na 320 pikseli, a nie w sposób pomniejszony i pokazujące 960 pikseli (lub cokolwiek robi to urządzenie domyślnie, zamiast responsywnego metatagu).
Uwaga: nie używaj responsywnego metatagu, jeśli Twoja witryna nie jest specjalnie zaprojektowana do responsywności i dobrze działa w tym rozmiarze, ponieważ pogorszy to doświadczenie.
Ten tag obsługuje więcej atrybutów:
| własność | Opis |
|---|---|
| szerokość | Szerokość wirtualnego obszaru roboczego urządzenia. |
| szerokość urządzenia | Fizyczna szerokość ekranu urządzenia. |
| wysokość | Wysokość „wirtualnego okienka ekranu” urządzenia. |
| wysokość urządzenia | Fizyczna wysokość ekranu urządzenia. |
| skala początkowa | Początkowe powiększenie podczas odwiedzania strony. 1.0 nie powiększa. |
| minimalna skala | Minimalna wielkość, jaką odwiedzający może powiększyć na stronie. 1.0 nie powiększa. |
| maksymalna skala | Maksymalna wielkość, jaką odwiedzający może powiększyć na stronie. 1.0 nie powiększa. |
| skalowalne przez użytkownika | Umożliwia urządzeniu powiększanie i pomniejszanie. Wartości to tak lub nie. |
Ogólnie zaleca się, aby nie zapobiegać skalowaniu, ponieważ jest to denerwujące i potencjalnie problem z dostępnością.
Prawdopodobnie będziesz chciał to również w swoim CSS:
@-ms-viewport( width: device-width; )Warto wiedzieć: zmiana wartości tego metatagu za pomocą JavaScript działa, strona zareaguje na nową wartość. Usuń cały tag i zamień lub zmień contentwłaściwość. Niezbyt powszechna potrzeba, ale może się pojawić.