# 網頁限制
網頁不同裝置上的功能限制
## 🖼下載圖片 / 影片

### 下載按鈕

| | 圖片 | 影片 |
| ----------------------------- | ---- | ---- |
| iOS + Safari (iOS 13+) | ✔ | ✔ |
| iOS + Chrome (Chrome 98+) | ❌ | ❌ |
| Android + Chrome (Chrome 98+) | ✔ | ✔ |
| iOS + WebView | ❌ | ❌ |
| Android + WebView | ❌ | ❌ |

⚠ 下載按鈕功能需要在同一網域名稱下建構後台才可以使用


### 長按圖片

| | 圖片 |
| ----------------------------- | ---- |
| iOS + Safari (iOS 13+) | ✔ |
| iOS + Chrome (Chrome 98+) | ✔ |
| Android + Chrome (Chrome 98+) | ✔ |
| iOS + WebView | ✔ |
| Android + WebView | ❌ |

⚠ iOS 15 開始，長按圖片有機會會選取圖片中的文字，需用戶手動在Safari設定中關閉

⚠ [Android 長按圖片的 toDataUrl 有 2MB 的限制](https://stackoverflow.com/questions/695151/data-protocol-url-size-limitations), 需使用以下做法

canvas.toBlob((blob) => {
    var newimg = new Image();
    newimg.src = URL.createObjectURL(blob);
    document.getElementById('download').href = newimg.src
    document.body.appendChild(newimg);
});


### 螢幕截圖

| | 圖片 |
| ---------------------------------------- | ---- |
| iOS + Safari + 一般瀏覽 (iOS 13+) | ✔ |
| iOS + Safari + 私密瀏覽 (iOS 13+) | ❓ |
| iOS + Chrome + 一般瀏覽 (Chrome 98+) | ✔ |
| iOS + Chrome + 私密瀏覽 (Chrome 98+) | ❓ |
| Android + Chrome + 一般瀏覽 (Chrome 98+) | ✔ |
| Android + Chrome + 私密瀏覽 (Chrome 98+) | ❌ |
| iOS + WebView | ❓ |
| Android + WebView | ❓ |

## 📱WebView (APP內建瀏覽器)

<aside>
📌 WebView 為APP內打開的瀏覽器，常見的有Line，Facebook，QRcode掃瞄器等。

由於很多功能 (例如相機、重力加速度感應器、定位系統) 都不能在WebView使用，所以不建議活動網頁在WebView內進行。

目前只有Line有提供強制開啟外部瀏覽器的功能，其他APP一律建議顯示提示頁面，強制民眾手動開啟外部瀏覽器。

</aside>


## 🎵音效 / 聲音

<aside>
📌 普通網頁

- iOS 需要使用者觸碰螢幕才可以開啟聲效
- iOS 在需要連續播放同一音檔時會有延遲 / 無法播放問題
- iOS 無法用程式控制音量
</aside>