# 前言 最近注意到 Safari 設定 100vh
在未滿內容的情況還是出現滑動的卷軸
這導致了體驗不佳
研究了一下發現是因為在 Safari 上有 url bar 的關係(iOS 15 以下還有 function bar)
100vh 的大小其實是這些 bar 隱藏時的大小(iOS Safari 滑動時這些 bar 會隱藏起來)
這邊試了幾種方式
# 改成 100% 可以改成用 100% 來取代 100vh
不過這得依情況來使用
# 使用 -webkit-fill-available -webkit-fill-available 目前只有 iOS 支援
所以可以用 useragent 來處理樣式來對應使用這個 CSS 屬性
範例
# 結論 我自己測試了一下會偏好使用 100%
個人會希望能夠簡單處理方式就用簡單的方式處理
...
Category: Safari
# Intro 有時在看 GA 的 Web 數據時會發現在 Safari 的點擊 click 事件似乎會比較少
其實這背後是有原因的
主要是各個瀏覽器再處理新 direct 時的行為不一致所導致的
在 Safari 上面發生 direct 到新的 URL 的行為(超連結或是 JS 處理) 時
事件觸發過程中的任何請求會中斷甚至不會發出請求
所以這就是為何在 GA 中的 Safari 的 click 數量會有些異常的原因
雖然 GA 預設會做 setTimeout 處理
但是也不一定是百分之百處理成功
所以最佳處理方式還是自己在用個 settimeout 包起來後再 direct
像是以下範例
link.addEventListener('click', (e) => { e.preventDefault(); window.gtag('event', 'click', { event_category: 'link' }); setTimeout(() => { location.href = e.target.href }, 250) }) 如果真的要確保 GA 送完才做 direct
GA 也有提供事件發送的 callback 處理
...