68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
|
|
function useIsMobile(): boolean {
|
|
const [isMobile, setIsMobile] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const checkIsMobile = () => {
|
|
// Check user agent for mobile phones specifically (not tablets)
|
|
const userAgent = navigator.userAgent.toLowerCase();
|
|
|
|
// Mobile phone patterns - exclude tablets
|
|
const mobilePatterns = [
|
|
/android.*mobile/, // Android phones (excludes tablets)
|
|
/iphone/, // iPhone
|
|
/ipod/, // iPod touch
|
|
/blackberry/, // BlackBerry
|
|
/windows phone/, // Windows Phone
|
|
/opera mini/, // Opera Mini
|
|
/iemobile/, // IE Mobile
|
|
/mobile/, // Generic mobile (but will be filtered by screen size)
|
|
];
|
|
|
|
// Check if user agent matches mobile patterns
|
|
const hasMobileUserAgent = mobilePatterns.some((pattern) =>
|
|
pattern.test(userAgent),
|
|
);
|
|
|
|
// Additional check: screen width for mobile phones (typically < 768px)
|
|
// This helps distinguish phones from tablets
|
|
const hasSmallScreen = window.innerWidth < 768;
|
|
|
|
// Exclude tablets by checking for tablet-specific patterns
|
|
const tabletPatterns = [
|
|
/ipad/,
|
|
/android(?!.*mobile)/, // Android tablets (Android without "mobile")
|
|
/tablet/,
|
|
/kindle/,
|
|
];
|
|
|
|
const isTablet = tabletPatterns.some((pattern) =>
|
|
pattern.test(userAgent),
|
|
);
|
|
|
|
// Return true only if it's a mobile device with small screen and not a tablet
|
|
return hasMobileUserAgent && hasSmallScreen && !isTablet;
|
|
};
|
|
|
|
const handleResize = () => {
|
|
setIsMobile(checkIsMobile());
|
|
};
|
|
|
|
// Initial check
|
|
setIsMobile(checkIsMobile());
|
|
|
|
// Listen for window resize events
|
|
window.addEventListener("resize", handleResize);
|
|
|
|
// Cleanup
|
|
return () => {
|
|
window.removeEventListener("resize", handleResize);
|
|
};
|
|
}, []);
|
|
|
|
return isMobile;
|
|
}
|
|
|
|
export { useIsMobile };
|