我遇到的跨瀏覽器問題（主要是Safari）

開發行動網頁時遇到的兩個惱人的跨瀏覽器問題，以及其他需要考慮的問題

將記錄於此。

Safari和Samsung Internet瀏覽器本身具有底部導航列。除非特別設定show/hide，否則捲動向下時會出現，向上捲動時會消失。

問題是，這些會導致視窗大小不固定且會改變。

例如，如果將高度設定為100vh，在沒有導航列時，佈局會準確顯示，但是導航列出現時，導航列會遮蓋UI。

要解決這個問題

1. 使用dvh。

dvh是動態視窗大小單位，會自動反映視窗高度的變化。因此，可以應對地址列或底部導航列的有無造成的UI佈局變化。

2. 也可以考慮svh。

svh是除了地址列或導航列之外，純粹UI區域的高度。在預期地址列或導航列會出現的情況下，使用svh會比較準確。

在行動版Safari中，選擇輸入欄位時，虛擬鍵盤會造成現有UI元素偏移的問題。在其他瀏覽器中，虛擬鍵盤通常會以absolute方式顯示，但在Safari行動網頁中，它就像應用display block一樣佔用了空間。

Safari在虛擬鍵盤出現時會動態調整視窗高度，導致使用vh單位的元素重新調整，從而產生問題。要解決這個問題，

1. 使用min-height。

固定高度，以防止UI偏移。

2. 應用供應商前綴。(後續說明)

插入在Safari等特定瀏覽器中適用的屬性。

3. 使用JavaScript動態控制視窗大小。

* 不建議使用此方法。捲動高度會瞬間移動，佈局會閃爍。

監聽resize事件以偵測視窗大小變化，並應用適當的樣式。

3-1. focusin事件發生時控制位置。

3-2. 虛擬鍵盤出現時控制位置。(以下範例中應用class)

最好能只用CSS解決，如果以上方法都無法解決，則需要檢查是否是position: absolute或fixed的元素，並移除top、right、left、bottom屬性，修改CSS。

此外，還找到了一些在Safari開發行動網頁時需要考慮的事項。

1. 使用某些屬性時，需要使用供應商前綴。

* 供應商前綴是讓瀏覽器能夠理解和渲染特定CSS屬性的前綴，它讓不同瀏覽器以不同方式實現的CSS能夠按預期生效。藉此可以確保不同瀏覽器之間的一致性，並與舊版瀏覽器相容。

種類

-webkit-: Chrome、Safari等
-moz-: Mozilla Firefox
-ms-: Internet Explorer和Edge
-o-: Opera

需要供應商前綴的典型屬性如下所示。

此外，Safari將LocalStorage和SessionStorage的容量限制在約5MB，並且各個分頁之間不共享儲存空間，因此需要注意。