鱼屏适配必须用正确viewport标签、DOM顺序和断点策略：①viewport设为width=device-width且禁用缩放限制；②DOM按header→nav→main→aside→footer顺序排列；③媒体查询基于真实换行临界点而非固定断点；④卡片设min-width防拉伸变形。
鱼屏不是“大号桌面屏”，而是视口宽度远超常规断点的特殊设备；不设对 viewport、不分离 DOM 结构、硬套固定断点，布局必崩。
viewport 必须写对，否则鱼屏根本不会触发响应逻辑
超宽屏（如 3440×1440、5120×1440）下，浏览器若没收到正确信号，会退回到 980px 模拟宽度渲染——文字细如发丝、按钮挤成一线、焦点顺序错乱。这不是样式问题，是渲染引擎压根没按真实视口计算。
-
<meta name="viewport" content="width=device-width, initial-scale=1">必须放在<head>最顶部，不能 defer，不能动态注入 - 禁用
maximum-scale和user-scalable=no：鱼屏用户常需双指缩放查看细节，禁用等于放弃这部分人 - 别用
width=1200或target-densitydpi（已废弃），这些在 Chrome/Edge 新版本中直接被忽略
导航全宽 + 内容受限，必须靠 HTML 结构分离
想让 <nav> 铺满 100vw，同时 <main> 只在 1440px 内居中？不能给 <body> 加 max-width，也不能把 <nav> 塞进带约束的容器里。
-
<nav>和<main>必须是平级兄弟元素，结构顺序为：<header>→<nav>→<main>→<aside>→<footer> -
<nav>直接设width: 100vw或width: 100%，背景/阴影自然撑满 -
<main>单独加max-width: 1440px+margin: 0 auto，并确保其父级无 padding/margin 干扰 - Bootstrap 的
container类不能加在<body>上——它的 CSS 规则只匹配.container > *，<body class="container">完全无效
表格、卡片、下拉框这些“硬骨头”要单独处理
它们天生抗拒收缩：max-width 对 <table> 常无效，<img> 会强行撑开父容器，<select> 在 iOS Safari 下基本无视宽度限制。
立即学习“前端免费学习笔记（深入）”；
-
<table>必须配table-layout: fixed+<colgroup>，且<colgroup>要紧贴<table>开始后、<thead>前 -
<img>、<iframe>等替换元素必须加max-width: 100%+height: auto -
<select>别指望 CSS 控制弹出菜单宽度；iOS 下尤其不可靠，换用Choices.js或TomSelect这类 JS 渲染组件更稳 - Flex/Grid 子项默认有
min-width: auto，会撑开容器；加min-width: 0或overflow-wrap: break-word才能真正受控
媒体查询不能靠猜，得测真实换行临界点
鱼屏下，导航栏可能在 2150px 就开始折行，而仪表盘卡片在 2800px 才填满两列。硬套 @media (min-width: 1200px)，会让中间一大段区间既不收缩也不扩展，行宽轻松突破 120 字符，阅读极其疲劳。
- 用 Chrome DevTools Device Toolbar 拖动宽度，观察导航文字何时换行、表格列是否重叠、按钮是否被截断
- 记下具体像素值（比如
@media (min-width: 2150px)），而不是估算或复用桌面断点 - 关键组件单独设断点：
@media (min-width: 2800px) { .dashboard-grid { grid-template-columns: 1fr 300px; } } - 避免嵌套媒体查询；
@media (min-width: 2150px) and (orientation: landscape)直接写，别拆两层
鱼屏适配最易被忽略的点，其实是 DOM 顺序和 html 元素上的 overflow: hidden：只写 body { overflow: hidden } 是无效的，滚动由根元素控制；而键盘 tab 焦点卡在右侧工具栏却找不到上下文，往往是因为 HTML 里先写了 <aside> 再写 <main>——视觉对了，动线断了。
