Skip to main content

Tedshd's Dev note

Category: Safari

Safari 設定 100vh 還是出現卷軸(scroll bar)

# 前言 最近注意到 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% 個人會希望能夠簡單處理方式就用簡單的方式處理 ...

在點擊連結或是 redirect 前送出請求

# 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 處理 ...