Poprawnie wskazana została wartość „viewport”. W praktyce właśnie meta name="viewport" służy do kontrolowania tzw. obszaru widzialnego (ang. viewport) na urządzeniach mobilnych i desktopowych. Przeglądarka mobilna domyślnie zakłada szeroką stronę i sztucznie ją pomniejsza, żeby „zmieściła się” na ekranie telefonu. Dopiero meta viewport mówi jej: potraktuj szerokość ekranu urządzenia jako bazową szerokość strony. Najczęściej spotykana, zgodna z dobrymi praktykami konstrukcja to: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Parametr width=device-width ustawia szerokość obszaru widzialnego na szerokość ekranu urządzenia, a initial-scale=1.0 definiuje początkowe powiększenie. Dzięki temu layout responsywny oparty na media queries w CSS działa poprawnie, bez dziwnych przeskalowań i zbyt małej czcionki. W nowoczesnym front-endzie przyjmuje się, że każda strona, która ma być używalna na telefonach, tabletach i laptopach, powinna mieć prawidłowo ustawiony meta viewport. Moim zdaniem to jest absolutna podstawa RWD, zaraz obok poprawnego użycia jednostek względnych (np. %, vw, em) i zaprojektowania siatki w CSS. Warto też pamiętać, żeby nie przesadzać z blokowaniem powiększania (np. user-scalable=no), bo to pogarsza dostępność strony dla osób słabiej widzących i jest uznawane za złą praktykę. Podsumowując: jeśli chcesz mieć stronę, która naprawdę „żyje” na różnych ekranach, meta name="viewport" to obowiązkowy element w sekcji <head>.
W tym zadaniu kluczowe jest zrozumienie, że tylko meta o name="viewport" ma realny wpływ na sposób, w jaki przeglądarka wyznacza obszar widzialny strony na różnych urządzeniach. To właśnie ten atrybut informuje silnik renderujący, jak interpretować szerokość i skalę dokumentu HTML na ekranach o różnych rozdzielczościach i gęstościach pikseli. Pozostałe podane opcje pełnią zupełnie inne role i ich pomylenie z viewportem wynika zwykle z tego, że wszystkie są „jakimiś metadanymi” w <head>. Atrybut name="keywords" był kiedyś używany głównie dla wyszukiwarek do opisu słów kluczowych strony. Obecnie większość wyszukiwarek go ignoruje, bo był masowo nadużywany do spamowania słowami kluczowymi. Nie ma on żadnego związku z responsywnością, skalowaniem strony czy dopasowaniem do ekranu telefonu. To tylko tekstowa informacja, która nie wpływa na sposób renderowania layoutu. Podobnie meta name="description" służy do przekazania krótkiego opisu strony, który często pojawia się jako fragment w wynikach wyszukiwania (snippet). To ważny element SEO i użyteczności, ale ponownie – nie steruje szerokością widoku, nie zmienia zoomu i nie mówi przeglądarce, jak ma „ułożyć” stronę na małym ekranie. To czysta informacja opisowa. Z kolei meta name="generator" jest używana głównie przez systemy CMS (np. WordPress, Joomla) do wpisania nazwy i wersji narzędzia, którym strona została wygenerowana. Ma znaczenie informacyjne, czasem diagnostyczne, ale z punktu widzenia użytkownika końcowego i wyglądu strony nie wnosi nic. Nie wpływa ani na skalę, ani na szerokość, ani na responsywność. Typowym błędem jest wrzucanie wszystkich metatagów do jednego worka i zakładanie, że skoro „meta coś tam”, to pewnie ma wpływ na wyświetlanie strony. W rzeczywistości tylko meta viewport wprost steruje parametrami widoku na urządzeniach mobilnych. Dlatego przy projektowaniu stron responsywnych warto oddzielić w głowie metadane SEO (keywords, description, generator) od metadanych technicznych związanych z renderowaniem (właśnie viewport).