I have made a website with nextjs 12 in the past and wanted to upgrade the entire site from ground up to nextjs 13
I found a few weird problems one being that the index page works on my local build but it doesn't on vercel but that's not what this post is about.
I've added a bit of code to show me the current window reselution. As it was expected both my old website and my new website have the same reselution on a desktop which is 3072 x 1595 on a 4k screen which is close to native res Usually tho, smartphones have a much lower resolution compared to the actual screen size. Now my problem I had is that my old website has a resolution of 412 x 811 while my new website has a resolution of 980 x 1929 which is more then double. Everything looks so small on a smartphone and is not usable at all. I dont know what I did on my older website if I even did anything. I thought it was automatic
I solved the same issue I had with this meta tag :
<meta name="viewport" content="width=device-width, initial-scale=1" />
You can put this meta tag in head.tsx inside the app folder directory like this :
import React, { FC } from "react";
const Head: FC = () => {
return (
<>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>NextJS 13 TailwindCSS</title>
</>
);
};
export default Head;
or use it in layout.tsx :
import React, { FC, ReactNode } from "react";
import { Footer, Header } from "../components";
interface LayoutProps {
children: ReactNode;
}
import "./globals.css";
const Layout: FC<LayoutProps> = ({ children }) => {
return (
<html lang="en">
<body>
<header>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>NextJS 13 TailwindCSS</title>
</header>
<main>{children}</main>
<footer>
<Footer />
</footer>
</body>
</html>
);
};
export default Layout;