用 transform: scale() 配合 transition 实现轻量缩放动画，作用于目标区块而非按钮，需设固定尺寸、transform-origin 和 will-change/translatez(0) 规避 ios 兼容问题，并用状态变量控制避免叠加。
点击按钮触发CSS缩放动画，而非JavaScript重绘
直接用 transform: scale() 配合 CSS 过渡最轻量、最可靠。别写一堆 getElementById + style.width/height 手动改尺寸——容易破坏布局流、触发重排，还难控制动画节奏。
常见错误是把 scale(2) 加在按钮自身上，结果只是按钮变大；真正要放大的是目标区块（比如一个 <div id="target">），所以样式必须作用在目标元素上。
<ul>
<li>给目标区块设固定 <code>width 和 height，或用 max-width/max-height 配合 overflow: hidden 控制边界
transform-origin: center（默认值，但显式写上更稳妥）transition: transform 0.3s ease-in-out，避免只写 transition: all —— 会意外过渡其他属性，拖慢性能按钮绑定事件时，避免重复触发导致缩放叠加
用户连点两次按钮，scale(2) 可能变成 scale(4)，再点又翻倍。这不是预期行为，得靠状态标记控制。
最简方案：用一个布尔变量记录当前是否已放大，每次点击先判断再切换。别依赖 class 切换做状态判断——如果手动删了 class，JS 状态就不同步了。
- 声明一个
let isScaled = false在闭包或模块作用域里 - 点击回调中：若
isScaled为true，执行element.style.transform = 'scale(1)'并设isScaled = false - 否则设
element.style.transform = 'scale(1.5)'并设isScaled = true - 不推荐用
classList.toggle()+ CSS 中写.scaled { transform: scale(1.5); }—— 因为无法保证初始状态干净，尤其页面由 SSR 渲染时
移动端 Safari 下 transform: scale() 有时不生效
老版本 iOS Safari（尤其是 14.x）对 transform 的硬件加速支持不稳定，纯 scale() 可能卡顿或失效。加一行 will-change: transform 或强制启用 GPU 渲染能绕过。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
这不是 bug，是渲染引擎优化策略：当它判断该元素不会频繁变化时，会降级到 CPU 渲染，而 scale() 在 CPU 渲染下可能被忽略或表现异常。
- 在目标区块的 CSS 中加上
will-change: transform - 或更稳妥地加
transform: translateZ(0)（空变换触发 GPU 层） - 两者可共存：
transform: scale(1.5) translateZ(0) - 注意：不要滥用
will-change，只加在真正需要缩放的元素上，否则内存占用上升
放大后内容溢出、遮挡或滚动条错位
scale() 是视觉缩放，不改变文档流尺寸。父容器仍按原始大小计算空间，导致放大后内容“撑破”边界、盖住其他元素，或滚动条位置不准。
解决核心思路：让父容器“感知”到缩放后的实际占用。不能靠 JS 动态改 offsetWidth（只读），得用 CSS 配合定位和溢出控制。
- 给目标区块的直接父容器加
overflow: hidden，裁掉超出部分 - 若需保持可滚动，把目标区块包一层
<div style="display: inline-block">，再设 <code>overflow: auto - 避免对
body或html做scale—— 会全局失真，且触发双滚动条 - 测试时务必打开浏览器开发者工具的“Toggle device toolbar”，看 iPhone SE 尺寸下是否内容被切掉 真实场景里，缩放逻辑常嵌在模态框、图表容器或图片查看器中，这些地方的父级往往带
position: relative 或 flex 布局——scale 后的定位偏移容易被忽略，得额外检查 transform-origin 是否落在可视中心。
