Ma/OrionTV
1
0
Fork 0
mirror of https://github.com/zimplexing/OrionTV.git synced 2026-02-04 03:36:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: Implement mobile tab navigation and enhance responsive layout for better user experience

Browse Source
This commit is contained in:
zimplexing
2025-08-06 22:00:29 +08:00
parent 7c7e8e0b97
commit 60c4e7420d
7 changed files with 174 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
hooks/useResponsiveLayout.ts
View File

@@ -38,14 +38,15 @@ const getLayoutConfig = (deviceType: DeviceType, width: number, height: number,
switch (deviceType) {
case 'mobile':
columns = isPortrait ? 2 : 3;
cardWidth = (width - spacing * (columns + 1)) / columns;
cardHeight = cardWidth * 1.5; // 2:3 aspect ratio
columns = isPortrait ? 3 : 4;
// 使用flex布局，卡片可以更大一些来填充空间
cardWidth = (width - spacing) / columns * 0.85; // 增大到85%
cardHeight = cardWidth * 1.2; // 5:6 aspect ratio (reduced from 2:3)
break;
case 'tablet':
columns = isPortrait ? 3 : 4;
cardWidth = (width - spacing * (columns + 1)) / columns;
cardWidth = (width - spacing) / columns * 0.85; // 增大到85%
cardHeight = cardWidth * 1.4; // slightly less tall ratio
break;