Aby strona poprawnie skalowała się na urządzeniach mobilnych, w sekcji <head> należy umieścić:
Źle.
<title> ustawia tytuł karty, nie ma wpływu na skalowanie.Źle.
<meta charset> ustawia kodowanie znaków, nie skalowanie strony.Dobrze. Meta viewport ustawia szerokość rzutni na szerokość urządzenia - podstawa RWD.
Źle.
<link> dołącza arkusz stylów, sam nie steruje skalowaniem.Znacznik
<meta name="viewport" content="width=device-width, initial-scale=1"> mówi przeglądarce mobilnej, że szerokość rzutni (viewport) ma odpowiadać szerokości urządzenia, a strona ma startować w skali 1:1. Bez niego telefon renderuje stronę jako szeroką i pomniejsza ją, przez co media queries nie działają jak należy. Dlatego dla poprawnego skalowania na komórkach niezbędny jest meta viewport.Pozostałe znaczniki pełnią inne role w sekcji
<head>. <meta charset="utf-8"> deklaruje kodowanie znaków, by poprawnie wyświetlały się polskie litery - ze skalowaniem nie ma związku. <link rel="stylesheet"> dołącza zewnętrzny arkusz stylów; potrzebny do wyglądu, lecz sam nie ustawia rzutni. <title> definiuje tytuł strony widoczny na karcie przeglądarki. Za prawidłowe skalowanie na urządzeniach mobilnych odpowiada znacznik meta viewport, dlatego to on jest poprawny.