+
{isDesktop &&
}
+ className={`top-[4rem] fixed right-0 bottom-0 px-4 ${getMobileContainerClasses()}`}
+ style={{
+ ...getLayoutStyles(),
+ // 移动端使用动态高度计算
+ height: (isMobile || isTablet)
+ ? 'calc(100dvh - 4rem)'
+ : 'calc(100vh - 4rem)'
+ }}
+ >
{children}
diff --git a/hooks/useDeviceType.ts b/hooks/useDeviceType.ts
index a46721f..30bb631 100644
--- a/hooks/useDeviceType.ts
+++ b/hooks/useDeviceType.ts
@@ -2,16 +2,16 @@ import { useState, useEffect } from 'react';
// 定义设备类型枚举
export enum DeviceType {
- MOBILE = 'mobile', // 手机
- TABLET = 'tablet', // 平板
- DESKTOP = 'desktop' // 桌面端
+ MOBILE = 'mobile',
+ TABLET = 'tablet',
+ DESKTOP = 'desktop'
}
// 定义屏幕断点
const BREAKPOINTS = {
- MOBILE: 480, // 0-480px 为手机
- TABLET: 1024, // 481-1024px 为平板
- DESKTOP: 1025 // 1025px 及以上为桌面端
+ MOBILE: 480,
+ TABLET: 1024,
+ DESKTOP: 1025
};
export function useDeviceType() {
@@ -22,35 +22,39 @@ export function useDeviceType() {
});
useEffect(() => {
- /**
- * 根据窗口宽度判断设备类型
- */
const getDeviceType = (width: number): DeviceType => {
if (width <= BREAKPOINTS.MOBILE) return DeviceType.MOBILE;
if (width <= BREAKPOINTS.TABLET) return DeviceType.TABLET;
return DeviceType.DESKTOP;
};
- /**
- * 处理窗口大小变化
- */
const handleResize = () => {
const width = window.innerWidth;
const height = window.innerHeight;
setWindowSize({ width, height });
setDeviceType(getDeviceType(width));
+
+ // 移动端动态视口高度处理
+ if (width <= BREAKPOINTS.TABLET) {
+ const vh = height * 0.01;
+ document.documentElement.style.setProperty('--vh', `${vh}px`);
+ }
};
- // 初始化设备类型
+ // 初始化
handleResize();
- // 添加窗口大小变化监听
+ // 添加事件监听
window.addEventListener('resize', handleResize);
+ window.addEventListener('orientationchange', () => {
+ // 延迟处理以确保获取正确的视口尺寸
+ setTimeout(handleResize, 100);
+ });
- // 清理监听器
return () => {
window.removeEventListener('resize', handleResize);
+ window.removeEventListener('orientationchange', handleResize);
};
}, []);
@@ -59,6 +63,8 @@ export function useDeviceType() {
windowSize,
isMobile: deviceType === DeviceType.MOBILE,
isTablet: deviceType === DeviceType.TABLET,
- isDesktop: deviceType === DeviceType.DESKTOP
+ isDesktop: deviceType === DeviceType.DESKTOP,
+ /** 是否为移动端设备（包括平板） */
+ isMobileDevice: deviceType === DeviceType.MOBILE || deviceType === DeviceType.TABLET
};
}
\ No newline at end of file
diff --git a/hooks/useSafeArea.ts b/hooks/useSafeArea.ts
new file mode 100644
index 0000000..42cdb71
--- /dev/null
+++ b/hooks/useSafeArea.ts
@@ -0,0 +1,64 @@
+import { useState, useEffect } from 'react';
+
+interface SafeAreaInsets {
+ top: number;
+ right: number;
+ bottom: number;
+ left: number;
+}
+
+export function useSafeArea() {
+ const [safeAreaInsets, setSafeAreaInsets] = useState
({
+ top: 0,
+ right: 0,
+ bottom: 0,
+ left: 0
+ });
+
+ const [viewportHeight, setViewportHeight] = useState(0);
+
+ useEffect(() => {
+ const updateSafeArea = () => {
+ // 获取 CSS 环境变量
+ const computedStyle = getComputedStyle(document.documentElement);
+
+ const top = parseInt(computedStyle.getPropertyValue('--sat').replace('px', '')) || 0;
+ const right = parseInt(computedStyle.getPropertyValue('--sar').replace('px', '')) || 0;
+ const bottom = parseInt(computedStyle.getPropertyValue('--sab').replace('px', '')) || 0;
+ const left = parseInt(computedStyle.getPropertyValue('--sal').replace('px', '')) || 0;
+
+ setSafeAreaInsets({ top, right, bottom, left });
+
+ // 设置动态视口高度
+ const vh = window.innerHeight;
+ setViewportHeight(vh);
+ document.documentElement.style.setProperty('--vh', `${vh * 0.01}px`);
+ };
+
+ updateSafeArea();
+
+ window.addEventListener('resize', updateSafeArea);
+ window.addEventListener('orientationchange', updateSafeArea);
+
+ // 延迟更新以处理移动端浏览器地址栏变化
+ const timeoutId = setTimeout(updateSafeArea, 500);
+
+ return () => {
+ window.removeEventListener('resize', updateSafeArea);
+ window.removeEventListener('orientationchange', updateSafeArea);
+ clearTimeout(timeoutId);
+ };
+ }, []);
+
+ return {
+ safeAreaInsets,
+ viewportHeight,
+ /** 获取考虑安全区域的样式 */
+ getSafeAreaStyle: (includeBottom = true) => ({
+ paddingTop: `max(1rem, ${safeAreaInsets.top}px)`,
+ paddingRight: `max(1rem, ${safeAreaInsets.right}px)`,
+ paddingBottom: includeBottom ? `max(1rem, ${safeAreaInsets.bottom}px)` : undefined,
+ paddingLeft: `max(1rem, ${safeAreaInsets.left}px)`,
+ })
+ };
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index d01ae8a..fae3ec4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -90,6 +90,20 @@ module.exports = {
'100': '100ms',
'200': '200ms',
'300': '300ms',
+ },
+ spacing: {
+ 'safe-top': 'env(safe-area-inset-top)',
+ 'safe-right': 'env(safe-area-inset-right)',
+ 'safe-bottom': 'env(safe-area-inset-bottom)',
+ 'safe-left': 'env(safe-area-inset-left)',
+ },
+ height: {
+ 'dvh': '100dvh',
+ 'safe-screen': 'calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))',
+ },
+ minHeight: {
+ 'dvh': '100dvh',
+ 'safe-screen': 'calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))',
}
},
},