没有CSS和仅JS的手机和平板电脑的显示元素

Question

我要显示两个不同的菜单

• 手机，平板电脑风景
• 手机，平板电脑风景肖像
• 桌面

我想用JavaScript而不是CSS来做。到目前为止，我有：

//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}/>        
  );
}

问题在于，在第一个IF语句中的代码中，对于平板电脑来说，这确实是我想要的。问题是，当人们在风景中使用桌面时（大多数情况下也是这样），这也将是真实的，并且将显示移动菜单。有帮助吗？