anonn•2y ago

anonn – 10-05 Oct 12

im using next js, and trying to use the meta tag for retaining the font size for phone viewports, but the font size of text when I go to the phone emulator in devtools doesn't seem to change. _app.js

import "../styles/globals.css";
import type { AppProps } from "next/app";
import Head from "next/head";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
        />
      </Head>
      <Component {...pageProps} />
    </>
  );
}

import "../styles/globals.css";
import type { AppProps } from "next/app";
import Head from "next/head";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
        />
      </Head>
      <Component {...pageProps} />
    </>
  );
}

3 Replies

Unknown User•2y ago

Message Not Public

anonn•2y ago

Sorry I will rephrase, I meant the purpose of the meta tag is the prevent the zoom out when the viewport is a phone. I know the meta tag will work for all viewports. My problem is that the meta tag does not take effect in removing the zoom out when the viewport is a phone, I must have some sort of error in my code. When I tried using the meta tag in a purely html file it worked, but with next.js it doesnt. nvm it works !close

reactibot•2y ago

This thread hasn’t had any activity in 12 hours, so it’s now locked. Threads are closed automatically after 12 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/902647189120118794/1029696344207675392