Fix viewport meta tag location

see https://nextjs.org/docs/messages/no-document-viewport-meta
2 years ago · ed0aa08641
parent 5c5a7ff79f
commit ed0aa08641
2 changed files with 5 additions and 1 deletions
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@ -1,6 +1,7 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { SWRConfig } from "swr";
 import { appWithTranslation } from "next-i18next";
+import Head from "next/head";

 import "styles/globals.css";
 import "styles/theme.css";
@ -18,6 +19,10 @@ function MyApp({ Component, pageProps }) {
        fetcher: (resource, init) => fetch(resource, init).then((res) => res.json()),
      }}
    >
+      <Head>
+        {/* https://nextjs.org/docs/messages/no-document-viewport-meta */}
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+      </Head>
      <ColorProvider>
        <ThemeProvider>
          <SettingsProvider>
--- a/src/pages/_document.jsx
+++ b/src/pages/_document.jsx
@ -9,7 +9,6 @@ export default function Document() {
          content="A highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations."
        />
        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=4" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=4" />
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=4" />