iOS上的水平滾動 - 關閉畫布導航菜單

將我的網站推送到開發服務器後，我在iOS上看到水平滾動（在本地開發時我沒有看到）。我使用的畫布導航菜單爲頁面提供了額外的寬度。 Here is the site。iOS上的水平滾動 - 關閉畫布導航菜單

任何幫助，非常感謝。謝謝你的時間！

來源

2015-03-31 Dallan

我在Desktop Safari中檢查了您的網站，發現同樣的問題。

問題似乎是網站佈局仍然認爲它更寬。起初我確信overflow-x:hidden和width:100%這個簡單的應用程序可以做到這一點。

However-

你似乎已經做到了。
它沒有。

我發現很難通過CSS篩選，因爲你有很多事情，我認爲這是可能的是，CSS3轉換正在促進這個問題，但我可以將其鎖定在觀看在臺式機Safari和而inspecting Mobile Safari directly有以下幾點：

應用position:fixed到您的主導航，而不是position:absolute。桌面Safari對此感到滿意。
刪除您的.site-content::before僞元素。這仍然導致移動Safari的問題。刪除將CSS轉換爲translate3d（100％，0,0）也有所幫助。

附註：您也可以考慮簡化您的HTML和/或CSS的方法。你有1.1MB的加載沒有任何真實的圖像;對於移動用戶來說，帶寬是一個真正的成本。我知道這可以成爲PITA，但值得一提。祝你好運！

來源

2015-03-31 19:58:06

非常感謝您花時間幫助我！我非常感謝你和StackOverflow社區。謝謝！我所做的是，將'.nav-primary'設置爲'position：fixed;'和'.site-content :: before'並設置爲'position：fixed;'。 – Dallan 2015-03-31 20:39:52

很高興幫助！歡迎來到SO社區，從一個相對較新的人到另一個...... – 2015-03-31 20:43:22

iOS上的水平滾動 - 關閉畫布導航菜單

回答

相關問題