Widen layout on tablet landscape while keeping 1080p desktop width.

Use max-w-6xl between 1024-1919px for iPad landscape, reset to max-w-4xl at 1920px for unchanged desktop.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/layout/site-width.ts

@@ -1,18 +1,18 @@
 /**
  * 响应式内容宽度（类名须完整书写，供 Tailwind 扫描）
- * - ≤1920px（1080p）：约 896px
- * - 1921px+（超宽入门）：约 1152px
- * - 2560px+（带鱼屏）：约 1280px
- * - 3440px+（超宽带鱼）：约 1440px
+ * - 手机 / 平板竖屏（<1024）：随屏宽，上限约 896px
+ * - 平板横屏（1024–1919）：约 1152px，比 1080p 桌面更宽
+ * - 1080p 桌面（1920）：约 896px（不变）
+ * - 1921px+ / 2560px+ / 3440px+：带鱼屏阶梯加宽
  */
 export const SITE_PAD = "px-4 sm:px-6 lg:px-8";
 
 export const SITE_WIDTH =
-  `w-full max-w-4xl ${SITE_PAD} min-[1921px]:max-w-6xl min-[2560px]:max-w-7xl min-[3440px]:max-w-[1440px]`;
+  `w-full max-w-4xl ${SITE_PAD} min-[1024px]:max-w-6xl min-[1920px]:max-w-4xl min-[1921px]:max-w-6xl min-[2560px]:max-w-7xl min-[3440px]:max-w-[1440px]`;
 
 export const SITE_WIDTH_NARROW =
-  `w-full max-w-3xl ${SITE_PAD} min-[1921px]:max-w-4xl min-[2560px]:max-w-5xl min-[3440px]:max-w-6xl`;
+  `w-full max-w-3xl ${SITE_PAD} min-[1024px]:max-w-5xl min-[1920px]:max-w-3xl min-[1921px]:max-w-4xl min-[2560px]:max-w-5xl min-[3440px]:max-w-6xl`;
 
 /** 页眉 / 页脚内层，与主内容同宽 */
 export const SITE_WIDTH_INNER =
-  `mx-auto w-full max-w-4xl ${SITE_PAD} min-[1921px]:max-w-6xl min-[2560px]:max-w-7xl min-[3440px]:max-w-[1440px]`;
+  `mx-auto w-full max-w-4xl ${SITE_PAD} min-[1024px]:max-w-6xl min-[1920px]:max-w-4xl min-[1921px]:max-w-6xl min-[2560px]:max-w-7xl min-[3440px]:max-w-[1440px]`;

tailwind.config.ts

@@ -13,6 +13,10 @@ module.exports = {
     "max-w-6xl",
     "max-w-7xl",
     "max-w-[1440px]",
+    "min-[1024px]:max-w-5xl",
+    "min-[1024px]:max-w-6xl",
+    "min-[1920px]:max-w-3xl",
+    "min-[1920px]:max-w-4xl",
     "min-[1921px]:max-w-4xl",
     "min-[1921px]:max-w-5xl",
     "min-[1921px]:max-w-6xl",