在昨天的文章中，我們為計算機注入了具備 0.5px 髮絲紋與晶體折射的「液態玻璃 (Liquid Glass)」視覺。然而，當使用者拿起手機敲擊螢幕時，若只有冷冰冰的像素變化而缺乏指尖的反饋，這種視覺美學便會瞬間跌落為「單純的網頁玩具」，無法企及原生 App 的實體操控快感。

今天，我們兌現昨日文末的承諾：正式公開專案的線上體驗版與開源倉庫！ 同時，我們將深入剖析一套兼顧 Android 實體線性馬達 與 iOS 聲學微脈衝 的跨平台觸覺雙引擎——如何打破兩大行動作業系統長年的生態藩籬，讓 Web 應用在不同手機上都能擁有俐落的實體敲擊反饋！

專案正式上線體驗與開源倉庫

線上體驗 Live Demo：https://410355-collab.github.io/Premium-Business-Calculator/
(強烈建議使用 iPhone Safari 或 Android 手機開啟體驗！)
GitHub 開源倉庫：https://github.com/410355-collab/Premium-Business-Calculator
歡迎提出建議與指導
(開發環境：Google Antigravity IDE + Google Gemini 協同開發)

一、技術痛點：Android 的鬆散與 iOS 的封閉系統

要讓 Web App 具備原生 App 的實體敲擊手感，前端工程師在跨平台實作時，會同時在兩大陣營撞上截然不同的現實高牆：

Android 陣營的「鬆散」：

Android 雖然支援 W3C 標準的 navigator.vibrate()，但絕大多數開發者只會隨意寫下 navigator.vibrate(50) 或 vibrate(100)。這種長震動會導致現代手機的 X 軸/Z 軸線性馬達產生嚴重的慣性回彈與延遲，無論是旗艦機還是中階機，按鍵按下去像是在摸一塊「嗡嗡作響的廉價塑膠」，毫無機械微動開關的俐落脆感。

iOS 陣營的「全面封殺」：

基於隱私保護與硬體防磨損政策，Apple 長年在 iOS 的 WebKit 核心中完全封殺 Vibration API。這意味著 iPhone 使用者在點擊網頁時，指尖接收到的反饋為絕對的零。

錯誤狀態缺乏生理感官反饋：

傳統網頁計算機在算式語法錯誤或除以零時，僅靠文字變紅。缺乏一種直覺、能透過手部與聽覺立即感知的生理警示通道。

二、 解決方案：跨平台雙軌觸覺引擎

在 Google Antigravity IDE 中，我們將 Android 與 iOS 的硬體特性提交給 Gemini Pro 進行架構探討。Gemini 提出了「硬體微秒調諧 + 聲學觸覺學」的雙軌融合戰略：

Android 篇：8ms 微秒級瞬態敲擊調校

不要讓馬達「震動」，而是讓馬達「點擊」。將震動時間嚴格壓縮在 8 毫秒 (8ms)，剛好克服線性馬達的靜摩擦力，在產生清脆衝量的瞬間立刻斷電，徹底消除馬達慣性餘震；遇到錯誤時，則採用 [35, 40, 35] 毫秒的三段式脈衝波，模擬物理卡榫卡死的回彈震感。

iOS 篇：Web Audio 聲學微脈衝替代學

既然無法調用馬達，就利用人類神經系統的「感官聯覺」。大腦在手指敲擊玻璃的瞬間，若耳朵接收到極低頻（30Hz~130Hz）且高衰減率的空氣振動微脈衝，會自動將聽覺刺激重組為指尖的「阻尼回饋感」。同時，在 DOM 底層預留 iOS 18 原生開關勾子，雙管齊下。

三、 核心代碼精華：跨平台雙軌觸覺引擎 (script.js)

以下是專案中負責智能感知設備環境、驅動 Android 震動與 iOS 聲學微脈衝的心臟代碼：

/* ─── 1. Web Audio 聲學合成引擎（專為 iOS 與無馬達設備設計） ─── */
let _audioCtx = null;

function getAudioContext() {
    if (!_audioCtx) {
        const AudioCtxClass = window.AudioContext || window.webkitAudioContext;
        if (AudioCtxClass) _audioCtx = new AudioCtxClass();
    }
    if (_audioCtx && _audioCtx.state === 'suspended') {
        _audioCtx.resume().catch(() => {});
    }
    return _audioCtx;
}

// 🍏 iOS 嚴格規範：在使用者首次觸控 (touchstart/pointerdown) 時靜默喚醒音訊上下文
function unlockAudioContextOnGesture() {
    const unlock = () => {
        getAudioContext();
        window.removeEventListener('touchstart', unlock, true);
        window.removeEventListener('pointerdown', unlock, true);
    };
    window.addEventListener('touchstart', unlock, { capture: true, passive: true });
    window.addEventListener('pointerdown', unlock, { capture: true, passive: true });
}
unlockAudioContextOnGesture();

function playAcousticHaptic(isError = false) {
    try {
        const ctx = getAudioContext();
        if (!ctx) return;
        const now = ctx.currentTime;
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();

        // 播放完畢立即解綁節點，杜絕高頻連續計算下的記憶體洩漏
        osc.onended = () => {
            try { osc.disconnect(); gain.disconnect(); } catch(e) {}
        };

        if (isError) {
            // ⚠️ 錯誤警示：80ms 雙重鋸齒波 (160Hz -> 50Hz)，產生摩擦破裂感
            osc.type = 'sawtooth';
            osc.frequency.setValueAtTime(160, now);
            osc.frequency.exponentialRampToValueAtTime(50, now + 0.08);

            gain.gain.setValueAtTime(0.3, now);
            gain.gain.exponentialRampToValueAtTime(0.001, now + 0.08);

            osc.connect(gain);
            gain.connect(ctx.destination);
            osc.start(now);
            osc.stop(now + 0.08);
        } else {
            // 🔘 正常敲擊：14ms 超短低頻正弦波 (130Hz -> 30Hz) 搭配指數衰減
            osc.type = 'sine';
            osc.frequency.setValueAtTime(130, now);
            osc.frequency.exponentialRampToValueAtTime(30, now + 0.014);

            gain.gain.setValueAtTime(0.35, now);
            gain.gain.exponentialRampToValueAtTime(0.001, now + 0.014);

            osc.connect(gain);
            gain.connect(ctx.destination);
            osc.start(now);
            osc.stop(now + 0.014);
        }
    } catch (e) {}
}

/* ─── 2. 跨平台雙軌智能分流中樞 ─── */
function triggerVibration(isError = false) {
    const toggle = getHapticToggle();
    if (!toggle || !toggle.checked) return;

    let didVibrate = false;

    // 🤖 軌道 1 (Android 旗艦實體調校)：精確 8ms 微秒級瞬態敲擊，拒絕拖泥帶水
    if (typeof navigator !== 'undefined' && navigator.vibrate) {
        try {
            // 正常點擊僅給 8ms 極致清脆；出錯時給予 [35ms 震, 40ms 停, 35ms 震]
            didVibrate = navigator.vibrate(isError ? [35, 40, 35] : 8);
        } catch (e) {}
    }

    // 🍏 軌道 2 (iOS 蘋果生態與 Fallback)：精確識別 WebKit 並啟動聲學微脈衝
    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) || 
                  (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
                  
    if (isIOS || !didVibrate) {
        playAcousticHaptic(isError);
    }

    // 🍏 iOS 18 Safari 原生觸覺勾子輔助切換
    const iosSwitch = document.getElementById('ios-haptic-switch');
    if (iosSwitch) {
        iosSwitch.checked = !iosSwitch.checked;
    }
}

四、 深度調校剖析：8ms 與 14ms 的物理對決

在 Google Antigravity IDE 的除錯過程中，這套引擎實現了驚人的感官一致性：

Android 的「扎實感」：

傳統 50ms 震動會讓馬達轉子來不及煞車；我們設定的 8ms 是 Android 線性馬達能被激勵發出單次波峰的最短極限，按鍵手感乾淨俐落。

iOS 的「感官騙術」：

在 iPhone 實機測試中，在開啟 14ms 聲學脈衝後，有很多的人誤以為 iPhone 的 Taptic Engine 正在網頁上震動！這正是神經科學與前端音訊結合的極致魅力。

無縫 Fallback 機制：

若使用者插上耳機或處於靜音模式，系統仍會保證 Android 實體震動正常運作；雙軌並行確保了無論在何種設備上，都不會出現程式崩潰或延遲。

五、總結

跨平台同權體驗：

不再讓 Android 與 iOS 使用者有差別待遇，用不同的底層技術達成相同的「原生實體感」。

無障礙生理反饋：

計算成功與計算錯誤在指尖與耳邊呈現出截然不同的動能波形，賦予商務工具極高的可靠感。

明日預告：多工分割與旋轉零破版！真正的滿幀服貼佈局

實體按鍵的敲擊感解決了，但若使用者拿著 iPhone 旋轉螢幕，或者遇到靈動島遮擋、網址列跳動破版，體驗依然會大打折扣。
在下一篇 Day 4 中，我們將深入探索：如何用 100dvh 動態視口與純 CSS Apple 原生物理彈簧貝茲曲線，打造真正零破版、抗跳動的滿幀響應式佈局！