2. 跨平台兼容性基础：主流操作系统差异、浏览器兼容性与移动端适配原则

绿色采购系统的碳足迹核算与合规披露模块，必须能够在异构IT环境中稳定运行。跨平台兼容性不是“能打开就行”，而是要求UI渲染一致、计算逻辑等价、文件路径与权限模型适配、以及数据交换格式在各终端无歧义。本章从操作系统、浏览器、移动端三个维度拆解适配要点。

2.1 主流操作系统差异（Windows / Linux / macOS）

绿色采购系统通常部署在Windows Server或Linux服务器端，而客户端可能运行Windows、macOS或Linux桌面。碳足迹工具链（如OpenLCA、Brightway）和合规文档生成脚本对操作系统的依赖集中在以下三个层面：

2.2 浏览器兼容性（Chrome / Firefox / Safari / Edge）

绿色采购系统的前端承担碳足迹仪表盘、合规披露报告预览、供应商数据录入等核心交互。浏览器兼容性直接影响碳因子图表渲染、PDF生成、WebAssembly计算模块的加载。

2.2.1 渲染引擎与CSS兼容矩阵

2.2.2 碳足迹图表渲染兼容清单

• Canvas 2D / WebGL： 所有主流浏览器均支持，但Safari在WebGL 2.0的浮点纹理精度上存在差异，碳足迹热力图建议使用 OES_texture_float 检测。
• SVG 内联： 完全兼容，但Firefox对 <foreignObject> 的裁剪行为与Chrome不同，合规披露报告中的混合排版需测试。
• 字体加载： 使用 font-display: swap 避免碳足迹数字因字体阻塞显示为空白。
• 打印样式： 合规披露PDF生成依赖 @media print，Chrome/Edge支持 page-break-inside: avoid，Safari需额外处理分页。

2.3 移动端适配原则

绿色采购系统的移动端场景包括：供应商现场数据采集（碳因子拍照录入）、审批流移动签批、合规证书扫码核验。移动端适配不是简单的响应式缩放，而是交互范式与性能模型的重新设计。

2.3.1 触控交互与碳数据录入

• 点击热区： 碳因子选择器、合规条款勾选框的最小触控区域 ≥ 44×44 pt（iOS HIG / Material Design 规范）。
• 数字键盘： 碳排放量输入字段应触发 <input type="number" inputmode="decimal">，避免全键盘遮挡。
• 手势冲突： 碳足迹图表（如桑基图）的缩放/平移手势与页面滚动冲突时，使用 touch-action: none 隔离图表容器。

2.3.2 性能与网络适配

2.3.3 移动端碳足迹录入界面适配示例

/* 碳因子选择器移动端适配 */
.carbon-factor-picker {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.carbon-factor-picker .option-item {
  min-height: 48px;          /* 触控热区 */
  padding: 12px 16px;
  border-radius: 8px;
  background: #f8f9fa;
  touch-action: manipulation; /* 禁用双击缩放 */
}

/* 数字输入字段 */
input[type="number"].carbon-input {
  font-size: 16px;           /* 防止iOS自动缩放 */
  padding: 12px;
  width: 100%;
  box-sizing: border-box;
}

/* 图表容器手势隔离 */
.chart-container-sankey {
  touch-action: none;
  overflow: hidden;
  width: 100%;
  height: 300px;
}

/* 弱网提示 */
.network-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #856404;
  background: #fff3cd;
  padding: 4px 10px;
  border-radius: 12px;
}

2.4 跨平台兼容性架构总览

将操作系统、浏览器、移动端三个维度的适配要点整合为统一的跨平台兼容性架构，指导绿色采购系统的前端与后端开发。