0

I have made a Navigation bar in react which had two components one for mobile navigation and one for desktop navigation, and I m conditionally rendering both according to the width of the device. But for some reason, it's not working on IOS, but working on other android devices properly.

here is the code.

const Navbar = () => {
  const [isMobile, setIsMobile] = useState(
    window.matchMedia("(max-width:1024px").matches
  );
  useEffect(() => {
    window.addEventListener("resize", () => {
      setIsMobile(window.matchMedia("(max-width:1024px").matches);
    });
  });

  return <div>{isMobile ? <Mobnav /> : <DesktopNavbar />}</div>;
};

and here is the iPhone image of the website : enter image description here

and here how it should be enter image description here

I did have added the meta tag :

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
Ashish Maurya
  • 59
  • 2
  • 9
  • [This is the solution which worked for me](https://stackoverflow.com/questions/35719526/safari-ignore-window-matchmedia) – Ashish Maurya Jun 29 '21 at 10:45
  • It was a typo mistake for more detail have a watch on this answer. https://stackoverflow.com/questions/35719526/safari-ignore-window-matchmedia – Ashish Maurya Sep 05 '21 at 22:21

0 Answers0