想要在React/Nextjs/tailwind webapp中根据用户所使用的设备(例如台式机、平板电脑或移动设备)隐藏/显示组件,因为在台式机上有某些键可用,而平板电脑和移动设备上没有这些键(例如Tab键)。不想通过屏幕尺寸来实现,因为这是一个设备问题(键盘上没有Tab键),而不是屏幕尺寸问题。
最初,我考虑获取设备类型(参考自另一个StackOverflow问答),但当用户在iPad等设备上并且正在使用该浏览器的桌面版(例如桌面版Safari而不是移动版Safari)时,似乎会失败。是否有更好的方法来处理这个问题,以便能够正确检查用户所使用的设备以便能够隐藏/显示React组件?
const getDeviceType = () => {
const ua = navigator.userAgent;
if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) {
return "tablet";
}
if (
/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(
ua
)
) {
return "mobile";
}
return "desktop";
};
react-device-detect
包?根据他们的文档:如果你需要检测特定的浏览器类型(例如 Chrome、Safari、Internet Explorer)或特定类别的设备(例如所有 iPods),这个库可以实现。完整链接在此。 - Omar Dieh