禁止 Safari 中 Double Tap 的縮小和放大

封面照

在很多情況下，為了確保版面不會因為使用者縮小或放大而導致跑版，這時都會使用 user-scalable=no ，來確保使用者無法縮小或放大畫面，但是這個方法，可能沒辦法在所有瀏覽器上都支援了。

問題點

平常都是使用 Chrome 作為主要開發瀏覽器，因此一直沒注意到這個問題，直到使用者回報：使用 Safari 瀏覽時，雙擊螢幕時可以放大或縮小畫面，這才注意到，原來 Safari 已經忽略 user-scalable=no 這個屬性。

Double Tap 在 Safari 上可以 Zoom-in 或 Zoom-out

解決方式

以上面的例子來說，可以在 CSS 裡面加上 touch-action: manipulation; ，讓元素只能使用滑動或兩指縮放，並且禁止所有非標準的手勢，像是雙擊縮放，同時也可以避免瀏覽器發生點擊事件的 300ms 延遲。

不過這只能解決其中一部份，當按鈕加上 disabled 的屬性，而且按鈕也是在禁止使用的狀態時，雙擊禁止使用的按鈕還是會觸發放大或縮小畫面，但這個部分就沒找到比較好的解法了。

既然解決不了問題，那只好解決發生問題的人！

所以就把按鈕的 disabled 屬性移除掉了……，取而代之的是用 JavaScript 來管理狀態，當按鈕應該要是禁止使用時，套用禁止使用的樣式，並且把 Click Event 忽略掉。

程式碼大概是長這樣：

後記

應該會有更好的解決方式，如果有的話再麻煩大家告訴我了。

這篇文章除了想要記錄這個情況該如何解決，另外還想討論 user-scalable=no 這個屬性被忽略的意義。

在 Safari 的發佈內容裡面有提到：

To improve accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets user-scalable=no in the viewport.

簡單來說呢，就是為了要提升使用者的可用性，因此在 Safari 上會自動忽略 user-scalable=no 的屬性。

對使用者來說這個應該算是好事一件， user-scalable=no 沒辦法限制使用者縮小或放大畫面，使用者可以自行調整到合適的大小瀏覽內容。尤其在沒做 RWD 的網站，或是為了整體設計，而將字體設定在不適合閱讀的字體大小，這些網站對於使用者在瀏覽時，都是非常痛苦的體驗。

因此將縮放比例固定住，這件事情本身就值得討論，因為每個人覺得舒服的字體大小都不同，因此使用者勢必要自己調整至舒服的字體大小，才能夠在網站上瀏覽得久。

Safari 忽略 user-scalable=no 這個屬性，也算是替使用者做了件好事吧！