-
可通过window.matchMedia监听prefers-color-scheme实时切换主题：获取MediaQueryList对象，用.matches判断当前模式，addEventListener('change')响应系统变更，并首次加载及回调中同步更新DOM类名或CSS变量。
-
用rem+viewport缩放控制最稳妥，但必须禁用text-size-adjust，否则iOSSafari会强行放大小字号文本；根本原因是系统「可读性缩放」和浏览器对viewport解析差异，导致手机和平板文字表现不一致。
-
JavaScript不直接实现响应式设计，主要靠CSS完成；但可通过监听resize、matchMedia、按需加载资源及补足交互逻辑来增强响应行为，优先用CSS，JS仅作辅助。
-
YouTube官方嵌入代码因含临时参数（如?si=...）可能导致iframe无法加载视频，移除URL中的非标准查询参数并精简allow属性即可快速修复。YouTube官方嵌入代码因含临时参数（如`?si=...`）可能导致iframe无法加载视频，移除URL中的非标准查询参数并精简allow属性即可快速修复。在网页中嵌入YouTube视频时，直接复制YouTube分享面板中的“嵌入”代码看似可靠，但实际常因URL
-
Flex容器中图片变形的直接原因是flex-shrink默认为1且父容器宽度不足，导致图片按基线缩放而失真；可靠解法是img{flex:00auto;width:auto;height:auto}。
-
hreflang是link标签的属性，非a标签属性；a标签中使用hreflang会被浏览器完全忽略，因其语义仅用于用户导航，不参与语言关系声明，而hreflang专用于head中link标签向搜索引擎声明多语言页面间的对应关系。
-
必须用DataView而非TypedArray，因其支持任意字节偏移读取，避免自然对齐限制导致的RangeError；解析时需传ArrayBuffer、显式指定offset和字节序，并用getBigInt64等方法处理64位整数。
-
text-transform:uppercase仅改变英文字符的视觉渲染为大写，不修改DOM原始值，对中文、数字、标点无效；适用于p、div、span等文本元素，禁用于input/textarea等需数据一致性的场景。
-
最干净现代的解法是html{scrollbar-gutter:stable;overflow-y:auto}，不支持时回退至html{overflow-y:scroll}；该属性仅对html根元素生效，且必须配合overflow-y:auto或scroll才触发预留空间。
-
最实用保险产品横向对比方案是纯HTML表格，因其可读性、可打印性和无障碍支持强于CSSGrid/Flex；需规范使用thead/tbody、thscope属性，避免rowspan，移动端转卡片流；投保流程须手写HTML+CSS步骤条；保费试算前端仅作基础公式计算并标注“仅供参考”，正式报价必调后端API校验健康等动态因子；首屏内容必须HTML直出，关键CSS内联防FOUC。
-
playsinline不是禁止全屏的开关，而是声明允许内联播放，实际是否内联需同时满足webkit-playsinline、muted、controls隐藏、src硬编码、用户手势触发play()等全套条件，缺一不可。
-
object标签仅在PDF嵌入、SVG或需强fallback控制的遗留场景中仍有价值；PDF嵌入要求data与type严格匹配且服务端响应头正确，typemustmatch可强制校验；Flash等插件已全面不支持；fallback内容须为合法HTML且位于object标签内；仅当无原生语义标签、需无JSfallback、依赖type校验及多层降级时才应使用object。
-
MessageChannel需同源调用且端口必须显式启动：跨域时虽可创建但消息被静默丢弃；port.postMessage后须调用port.start()或设置onmessage；port1与port2须分发给双方；传输大数据应使用transfer列表实现零拷贝。
-
最简单兼容方案是CSStransform:scale()配合:hover实现平滑居中缩放，需设display:block、transition、transform-origin:center及overflow:hidden防溢出，并添加cursor、GPU加速等细节优化体验。
-
Object.isExtensible仅用于检测对象是否可扩展，不能主动防范属性膨胀；真正防护需结合Object.preventExtensions设限、Proxy拦截非法新增、关键节点断言校验，并规避误用陷阱。
