494d98bee5
- 添加触摸手势支持库 (react-spring + @use-gesture/react) - 照片模态框增加左右滑动切换功能 - 照片画廊增加下拉刷新功能 (移动端) - 优化所有按钮符合44px最小触摸目标标准 - 增强移动端导航体验，增加悬停和选中状态 - 创建设备信息检测钩子 (useDeviceInfo) - 开发优化图片组件，支持懒加载和骨架屏 - 改进移动端手势交互和视觉反馈 - 完善响应式断点系统和触摸设备检测 - 前端构建测试成功，开发服务器正常启动 Task 23 completed: 前端响应式设计优化
66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import * as React from "react"
|
|
|
|
const MOBILE_BREAKPOINT = 768
|
|
const TABLET_BREAKPOINT = 1024
|
|
const TOUCH_SUPPORT = typeof window !== 'undefined' && 'ontouchstart' in window
|
|
|
|
export function useIsMobile() {
|
|
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
|
|
|
|
React.useEffect(() => {
|
|
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
|
|
const onChange = () => {
|
|
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
|
}
|
|
mql.addEventListener("change", onChange)
|
|
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
|
return () => mql.removeEventListener("change", onChange)
|
|
}, [])
|
|
|
|
return !!isMobile
|
|
}
|
|
|
|
export function useDeviceInfo() {
|
|
const [deviceInfo, setDeviceInfo] = React.useState({
|
|
isMobile: false,
|
|
isTablet: false,
|
|
isDesktop: false,
|
|
hasTouch: false,
|
|
viewport: { width: 0, height: 0 }
|
|
})
|
|
|
|
React.useEffect(() => {
|
|
const updateDeviceInfo = () => {
|
|
const width = window.innerWidth
|
|
const height = window.innerHeight
|
|
|
|
setDeviceInfo({
|
|
isMobile: width < MOBILE_BREAKPOINT,
|
|
isTablet: width >= MOBILE_BREAKPOINT && width < TABLET_BREAKPOINT,
|
|
isDesktop: width >= TABLET_BREAKPOINT,
|
|
hasTouch: TOUCH_SUPPORT,
|
|
viewport: { width, height }
|
|
})
|
|
}
|
|
|
|
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
|
|
const mqt = window.matchMedia(`(max-width: ${TABLET_BREAKPOINT - 1}px)`)
|
|
|
|
updateDeviceInfo()
|
|
|
|
const handleResize = () => updateDeviceInfo()
|
|
|
|
mql.addEventListener("change", handleResize)
|
|
mqt.addEventListener("change", handleResize)
|
|
window.addEventListener("resize", handleResize)
|
|
|
|
return () => {
|
|
mql.removeEventListener("change", handleResize)
|
|
mqt.removeEventListener("change", handleResize)
|
|
window.removeEventListener("resize", handleResize)
|
|
}
|
|
}, [])
|
|
|
|
return deviceInfo
|
|
}
|