chore: 更新依赖

Author: ckvv

content/web/移动端web兼容性.md

@@ -0,0 +1,119 @@
+---
+title: "移动端web兼容性"
+draft: true
+tags: ["web"]
+date: "2025/08/08"
+---
+
+移动端 Web 的运行环境更加碎片化：
+
+* **设备差异**：从低端千元机到旗舰机，硬件性能差距明显
+* **系统多样**：Android 不同版本、iOS 不同版本差异大
+* **浏览器分化**：Chrome、Safari、UC、微信内置浏览器、抖音内置浏览器等，各自内核实现不一致
+* **API 支持度不一**：新特性支持情况不稳定，甚至存在同版本不同设备差异
+
+本文将从实际开发经验出发，分享移动端 Web 兼容性的方法
+
+## API 兼容性查询
+
+了解目标 API 在各浏览器的支持情况
+
++ **[MDN Browser Compatibility](https://developer.mozilla.org/)**
+
++ **[Can I Use](https://caniuse.com/)**
+
+> 建议在引入新 API 前，先查一遍兼容性
+
+---
+
+## 开发与构建工具配置
+
+### 打包工具配置
+
+以 **Vite** 为例：
+
+* `build.target`：决定最终构建输出 JS 的版本（如 `es2015`、`esnext`）
+* **Polyfill**：通过插件或构建时注入，实现低版本浏览器的 API 补丁（如 `core-js`、`polyfill.io`）
+
+### TypeScript 配置
+
+在 `tsconfig.json` 中：
+
+* **`target`**：控制编译输出的 ECMAScript 版本（影响箭头函数、class、async/await 等语法是否降级）
+* **`lib`**：声明可用 API（如 `"DOM.Iterable"`, `"ES2020"`），影响编译时类型检查
+
+### CSS 兼容处理
+
+* **PostCSS** + `autoprefixer`：自动添加浏览器前缀（`-webkit-`, `-moz-` 等）
+* **lightningcss**：更快的 CSS 转换工具，支持自动降级部分新特性
+
+### Polyfill 策略
+
+* 按需引入，避免无意义的包体积膨胀
+* 现代浏览器可使用 `dynamic import` 动态加载 polyfill
+
+
+## 调试与验证
+
+### 模拟器调试
+
+* **iOS**：Xcode 内置模拟器，可选择不同设备和系统版本
+* **Android**：Android Studio 模拟器，可模拟多种机型和分辨率
+
+### 真机调试
+
+* 必不可少，能发现模拟器无法复现的性能问题与兼容性 Bug
+* 可使用 **VConsole** 在移动端直接查看日志
+
+### 远程调试
+
+* Safari + USB 调试 iOS 设备
+* Chrome DevTools + USB 调试 Android 设备
+
+## 问题排查
+
+1. **错误捕获与上报**
+
+   * 在 `window.onerror`、`window.addEventListener('unhandledrejection')` 中捕获错误
+   * 上报信息包括：错误描述、脚本文件名、行列号、浏览器版本、当前 URL 等
+   * 服务端聚合日志，便于后续分析
+
+2. **远程调试模式**
+
+   * 通过账号或 URL 参数判断是否开启调试模式
+   * 调试模式下可引入 **VConsole**、**page-spy-web** 等工具
+
+---
+
+## 性能优化与降级方案
+
+* **图片优化**：WebP/AVIF 格式、懒加载
+* **资源按需加载**：路由拆分、组件懒加载
+* **降级处理**：在低性能设备上关闭动画、使用静态替代方案
+* **API 降级**：不支持的新特性可回退到旧实现（例如 `oklch` 回退到 `rgb`）
+
+
+## 用户提示与反馈
+
+1. **不支持浏览器提示**
+
+   * 检测浏览器内核及版本，如果不支持，弹框提示用户升级浏览器或更换设备
+
+2. **用户反馈渠道**
+
+   * 应用内的“问题反馈”入口
+   * 引导用户提交：问题描述、截图、设备信息、浏览器版本
+   * 对频繁出现的兼容性问题建立 FAQ
+
+
+## 总结
+
+移动端 Web 兼容性不是一次性的工作，而是一个持续迭代、动态优化的过程。
+
+* 开发前：查兼容性，合理选用 API
+* 开发中：配置好构建工具与 Polyfill
+* 调试阶段：模拟器 + 真机 + 远程调试三管齐下
+* 上线后：监控、上报、降级，及时响应用户反馈
+
+做到这些，才能让你的移动端 Web 在碎片化的设备环境中运行。
+

package.json

@@ -2,10 +2,10 @@
   "name": "astro-latest",
   "type": "module",
   "version": "0.0.1",
-  "packageManager": "pnpm@10.0.0+sha512.b8fef5494bd3fe4cbd4edabd0745df2ee5be3e4b0b8b08fa643aa3e4c6702ccc0f00d68fa8a8c9858a735a0032485a44990ed2810526c875e416f001b17df12b",
+  "packageManager": "pnpm@10.28.0+sha512.05df71d1421f21399e053fde567cea34d446fa02c76571441bfc1c7956e98e363088982d940465fd34480d4d90a0668bc12362f8aa88000a64e83d0b0e47be48",
   "repository": "https://github.com/ckvv/ckvv.github.io",
   "engines": {
-    "node": "^22.x"
+    "node": "^24.x"
   },
   "scripts": {
     "gen": "node --experimental-strip-types ./scripts/gen.ts",
@@ -16,22 +16,22 @@
     "lint": "eslint . --fix"
   },
   "dependencies": {
-    "@astrojs/mdx": "^4.3.1",
-    "@astrojs/react": "^4.3.0",
-    "@astrojs/rss": "^4.0.12",
-    "@astrojs/vue": "^5.1.0",
-    "@tailwindcss/vite": "^4.1.11",
-    "astro": "^5.12.5",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "tailwindcss": "^4.1.11",
-    "vue": "^3.5.18"
+    "@astrojs/mdx": "^4.3.13",
+    "@astrojs/react": "^4.4.2",
+    "@astrojs/rss": "^4.0.15",
+    "@astrojs/vue": "^5.1.4",
+    "@tailwindcss/vite": "^4.1.18",
+    "astro": "^5.16.11",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "tailwindcss": "^4.1.18",
+    "vue": "^3.5.26"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^5.0.0",
-    "@types/react": "^19.1.9",
-    "@types/react-dom": "^19.1.7",
-    "eslint": "^9.32.0",
-    "eslint-plugin-astro": "^1.3.1"
+    "@antfu/eslint-config": "^7.0.1",
+    "@types/react": "^19.2.8",
+    "@types/react-dom": "^19.2.3",
+    "eslint": "^9.39.2",
+    "eslint-plugin-astro": "^1.5.0"
   }
 }