WordPress

Każdy motyw z katalogu WordPressa napisany w ostatniej dekadzie zawiera ten znacznik. Jeśli Twój go nie ma, najpierw zastanów się, czy motyw w ogóle jest responsywny (zobacz ostrzeżenie powyżej).

Jeśli jest, dodaj znacznik przez wp_head za pomocą darmowej wtyczki Code Snippets (Snippets → Add New, uruchamianie na froncie witryny) albo na końcu pliku functions.php w motywie potomnym (child theme). Nie w motywie nadrzędnym: aktualizacja nadpisałaby kod.

// Mobilny viewport dla motywu, który go pomija.
add_action('wp_head', function () {
    echo '<meta name="viewport" content="width=device-width, initial-scale=1">' . "\n";
}, 1);

Sprawdź, czy znacznik pojawia się teraz raz. Jeśli pojawia się dwa razy, motyw jednak go miał i kod nie jest potrzebny. Następnie wyczyść pamięć podręczną stron.

Node.js i Next.js

Next.js, App Router. Next.js sam dodaje do każdej strony domyślny znacznik width=device-width, initial-scale=1. Jeśli go brakuje, poszukaj własnego eksportu viewport albo ręcznie wpisanego <meta name="viewport"> w layoucie, który go nadpisuje. Aby zmienić wartości domyślne, eksportuj viewport z layoutu lub strony (Next.js 14 i nowsze), a nie znacznik <meta>:

export const viewport = {
    width: 'device-width',
    initialScale: 1,
};

Next.js, Pages Router. Dodaj znacznik przez next/head w pages/_app.js, a nie w pages/_document.js (Next.js ostrzega tam przed znacznikami viewport):

import Head from 'next/head';

export default function App({ Component, pageProps }) {
    return (
        <>
            <Head>
                <meta name="viewport" content="width=device-width, initial-scale=1" />
            </Head>
            <Component {...pageProps} />
        </>
    );
}

Inne aplikacje Node.js (Express z silnikiem szablonów, Astro, SvelteKit): dodaj linię do <head> głównego szablonu. SvelteKit ma ją w src/app.html od początku.

Laravel

Dodaj linię do <head> każdego głównego layoutu, na przykład resources/views/layouts/app.blade.php oraz osobnych layoutów dla gości lub stron marketingowych, jeśli je masz:

<meta name="viewport" content="width=device-width, initial-scale=1">

Layouty generowane przez starter kity Laravela już go zawierają.

Statyczny HTML

Dodaj linię wewnątrz <head> na każdej stronie, zaraz po <meta charset="utf-8">:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Example</title>
</head>

Z generatorem stron (Hugo, Jekyll, Eleventy) dodaj ją raz w szablonie bazowym.

Shopify

Każdy motyw z Shopify Theme Store zawiera ten znacznik. Jeśli Twój go nie ma, motyw został zmodyfikowany: otwórz Online Store → Themes → … → Edit code, znajdź layout/theme.liquid i dodaj linię wewnątrz <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">