我正在構建一個Web門戶，它必須在多個平臺上實用且美觀。
其中一個平臺是IOS Safari，這是我遇到的一個問題。
在我的代碼中，我將兩個浮動按鈕對齊到寬度和高度均爲100％的div底部
這一切都正常工作，我的按鈕顯示完全像它們應該在頁面底部。
但是，當我點擊按鈕從移動Safari瀏覽器的緊湊視圖切換到全視圖，我的按鈕隱藏在底部導航欄後面！
當用戶點擊屏幕底部的10％時，safari mobile是否正常顯示擴展菜單？
我該如何避免這種情況？
在這個gif中，您可以在IOS模擬器上看到問題：
正如您所看到的，只有當按鈕位於視圖的較低10％時纔會出現問題。 這只是一個正常的按鈕，我的代碼被幾個開發人員三重檢查，它沒有錯誤。與頁面底部對齊的按鈕與移動Safari的菜單欄衝突
我想我可能找到了答案。設置你的內容有以下類型：
height: 100%（允許內容填充視口，超越底部）overflow-y: scroll（允許您滾動視口下方;默認值是visible）-webkit-overflow-scrolling: touch（以平滑任何滾動行爲）似乎強制Safari中的iOS菜單始終顯示。這樣，按鈕點擊將實際上工作，而不是打開Safari菜單。希望這可以幫助！
這是正確的jennz0r，我忘了這個問題，但這是我採取的方法以及 – dennismuys
事實證明，這也可能影響Chrome，導致底部按鈕浮動，直到滾動完成。至少在我們的情況下，這是另一個問題。我們現在正在研究用於瀏覽器檢測的JS解決方案，而不僅僅是CSS。 – jennz0r
@ jennz0r我討厭我們不得不求助於瀏覽器檢測，但這也是我們正在關注的。我有興趣聽到你最終做了什麼。 – ItsGeorge
事實證明這是safari mobile的標準行爲，因此不能被覆蓋，也許在未來的IOS更新中，這個功能將會改變。
我看到同樣的問題。這讓我難過，沒有答案。你有沒有做任何解決方法？ – jennz0r
不，我沒有找到解決辦法，我只是認爲它是理所當然的，最終用戶似乎也這樣做。 – dennismuys
有沒有可能爲此找到解決方法？我遇到了同樣的問題。 – flyingL123
我知道這個問題是有點老了，但是因爲問題依然存在，我想我應該分享我的經驗...
截至目前沒有修復該問題，但有一個解決方法。 jennz0r提供的解決方案可能適用於某些人，但我不喜歡總是顯示菜單欄的想法。我看到一個網站解決了問題......至少它似乎起作用。我沒有在他們的CSS或JS中找到任何東西。
那麼是什麼修復？ 由於「死區」的高度爲44px，因此他們只是將其浮動條的高度設置爲88px：D用戶會本能地點按按鈕的頂部/中心，並且幾乎總能在第一次嘗試時使用！
「如果這是愚蠢的，但它的工作原理...這是不傻...」;）
代碼。小提琴。截圖。一些東西。任何東西。 –
我的代碼沒有問題，我已經對它進行了三重檢查，並且我無法在小提琴中複製它。它發生在IOS中任何按鈕的10％以下的視圖中。 – dennismuys
我們遇到了完全相同的問題，並採取了在底部按鈕下方增加一個44像素的空間，這看起來很糟糕。我認爲最好的解決辦法是強制它永遠保持開放。 – ItsGeorge