i’ve made a webpage using nextjs wich is responsive using media queries, works really well on safari using mac and at firefox aswell.
but when i try to open it on iphone the images have a completely different size and media queries appear to do not work. its like it just run all media queries instead of only the ones according to the window size.
i tried adding the meta tag at layout.tsx but did not worked either.
import "./globals.css";
export const metadata: Metadata = {
title: "Migra",
description: "Encontre o melhor lugar para trabalhar/viajar",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<head>
<meta content="width=device-width, initial-scale=1" name="viewport" />
</head>
<body>{children}</body>
</html>
);
}