WordPress

Vse teme iz imenika WordPress, napisane v zadnjem desetletju, oznako vsebujejo. Če je vaša nima, najprej premislite, ali je tema sploh odzivna (glejte opozorilo zgoraj).

Če je, oznako dodajte prek wp_head z brezplačnim vtičnikom Code Snippets (Snippets → Add New, izvajanje na sprednjem delu strani) ali na konec datoteke functions.php v podrejeni temi (child theme). Ne v nadrejeno temo: posodobitev bi kodo prepisala.

// Mobilni viewport za temo, ki ga izpusti.
add_action('wp_head', function () {
    echo '<meta name="viewport" content="width=device-width, initial-scale=1">' . "\n";
}, 1);

Preverite, da se oznaka zdaj pojavi enkrat. Če se pojavi dvakrat, jo je tema vendarle imela in koda ni potrebna. Nato počistite predpomnilnik strani.

Node.js in Next.js

Next.js, App Router. Next.js privzeto oznako width=device-width, initial-scale=1 doda na vsako stran sam. Če je ni, poiščite lasten izvoz viewport ali ročno napisan <meta name="viewport"> v predlogi, ki jo povozi. Za spremembo privzetih vrednosti iz predloge ali strani izvozite viewport (Next.js 14 in novejši), ne oznake <meta>:

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

Next.js, Pages Router. Oznako dodajte z next/head v pages/_app.js, ne v pages/_document.js (Next.js tam pred oznakami viewport opozarja):

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} />
        </>
    );
}

Druge aplikacije Node.js (Express s predlogami, Astro, SvelteKit): vrstico dodajte v <head> glavne predloge. SvelteKit jo ima v src/app.html že od začetka.

Laravel

Vrstico dodajte v <head> vsake glavne predloge, na primer resources/views/layouts/app.blade.php in ločenih predlog za goste ali predstavitvene strani, če jih imate:

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

Predloge, ki jih ustvarijo začetni kompleti (starter kits) Laravel, jo že vsebujejo.

Statični HTML

Vrstico dodajte znotraj <head> na vsaki strani, takoj za <meta charset="utf-8">:

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

Z generatorjem strani (Hugo, Jekyll, Eleventy) jo dodajte enkrat v osnovno predlogo.

Shopify

Vse teme iz trgovine Shopify Theme Store oznako vsebujejo. Če je vaša nima, je bila tema prilagojena: odprite Online Store → Themes → … → Edit code, poiščite layout/theme.liquid in vrstico dodajte znotraj <head>:

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