曜輝工作室的網站設計費用大概多少？

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>iOS Safari iframe 優化版</title>
    <style>
        :root { --app-height: 100%; }
        * { box-sizing: border-box; }
        
        html, body {
            margin: 0; padding: 0;
            width: 100%; height: 100%;
            overflow: hidden; /* 關鍵：強制鎖死 body 滾動 */
        }
        
        .iframe-container {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            width: 100%;
            /* 多重高度回退機制 */
            height: 100%;
            height: 100vh;
            height: 100dvh;
            height: -webkit-fill-available;
            height: var(--app-height);
            overflow: hidden;
            /* 處理 iPhone 瀏海與底部安全區域 */
            padding-top: env(safe-area-inset-top, 0);
            padding-bottom: env(safe-area-inset-bottom, 0);
            /* 啟動 iOS 慣性滾動 */
            -webkit-overflow-scrolling: touch;
        }
        
        .iframe-container iframe {
            width: 100%; height: 100%;
            border: none; display: block;
        }
    </style>
</head>
<body>
    <div class="iframe-container">
        <iframe src="你的嵌入網址" frameborder="0" allowfullscreen scrolling="yes"></iframe>
    </div>
    
    <script>
        // JS 動態計算：精準取得工具列後的真實高度
        function setAppHeight() {
            const doc = document.documentElement;
            doc.style.setProperty('--app-height', `${window.innerHeight}px`);
        }
        window.addEventListener('resize', setAppHeight);
        window.addEventListener('orientationchange', () => setTimeout(setAppHeight, 100));
        setAppHeight();
        window.addEventListener('load', setAppHeight);
    </script>
</body>
</html>

技術核心：為什麼這樣寫有效？

VH 與 DVH 的動態高度計算差異

▍ 1. 動態高度標籤（dvh）

使用現代 CSS 單位 100dvh (Dynamic Viewport Height)，它會隨著工具列縮放自動調整。

▍ 2. JS 二重保險

window.innerHeight 是最誠實的值，它回傳的是「肉眼真正看得見」的高度，自動扣除 Safari 底部遮擋。

▍ 3. Body 鎖死（Overflow Hidden）

防止 body 產生多餘滾動條，確保使用者的滑動手勢 100% 傳遞給 iframe。

▍ 4. 視窗適配（Viewport Fit）

viewport-fit=cover 配合 env(safe-area-inset-*)，能讓內容完美避開 iPhone 瀏海與螢幕底部的 Home 指示條。

進階：如果下方需要固定按鈕？

若要預留 60px 放置自訂按鈕，請修改 CSS：

.iframe-container {
    bottom: 60px; /* 為按鈕留位子 */
}
.bottom-button {
    position: fixed;
    bottom: 0; left: 0; right: 0; height: 60px;
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: #333;
    display: flex; align-items: center; justify-content: center;
}

iOS Safari 三大坑總結（懶人包）

痛點	原因	終極解法
高度被擋	100vh 包含工具列	100dvh + JS 動態計算
完全不讓滾	iOS 預設 iframe 鎖定	body { overflow:hidden } + fixed
滾動卡頓	缺乏慣性物理量	-webkit-overflow-scrolling: touch