0

I have two different menu's that I want to show based if they are on

  • phone, tablets landscape
  • phone, tablets landscape portrait
  • desktop

I want to do it in javascript and not CSS. So far I have:

//For tablets/phones in landscape
if (window.matchMedia("(orientation: landscape)").matches) {
  return (
    <MegaMenuContainer provider={provider}/> 
  );
}
//for desktop
else if (width > 768){
  return (
    <MegaMenuContainerDesktop provider={provider}/>    
  );
}
//for tablets/phones in portrait
else {
  return (
    <MegaMenuContainer provider={provider}/>        
  );
}

Problem is that in the code in the first IF statement, it will be true for tablets as I want it to be. Problem is that it will ALSO be true when people uses a desktop in landscape (which is true in most cases) and the mobile menu will be shown. Any help?

mplungjan
  • 169,008
  • 28
  • 173
  • 236
Arte2
  • 309
  • 4
  • 19
  • Please [search](/search?q=%5Bjs%5D+detecting+tablet+or+mobile) before posting. More on searching [here](/help/searching). – T.J. Crowder Apr 24 '19 at 12:26
  • A lot of these code I have in the example is from a search I have found on this site. I could only find solutions for landscape/portrait detection but not for device or how to embedd this with desktop alternative. – Arte2 Apr 24 '19 at 12:29

0 Answers0