使用iPhone時，網站上出現水平滾動條

我的手機版網站http://dsmedvednikov2.zzz.com.ua/出現問題。無論使用Safari還是Google Chrome瀏覽器，使用iPhone或iPad時都會出現水平滾動條。在Android設備上一切正常。有人能給我一個建議嗎？使用iPhone時，網站上出現水平滾動條

2017-09-05 Danil

您是使用固定寬度可能比屏幕的寬度更大。你可以發佈工作的設備和不工作的設備的尺寸？ – Milk

請向我們提供網站的代碼。但到目前爲止，我可以告訴你的是，一個元素正在擴大網頁的寬度，因此超出了視口的寬度。要查看要執行此操作的元素，請爲所有元素指定一個邊框，從中可以看到哪個元素佔據了該空間。 – WebsitesOntario

在我的桌面和所有Android設備上的Chrome開發者模擬器中，一切正常，所以我不認爲這個問題是關於某個元素的寬度，也許是某種iOS問題。 – Danil

您可以限制用戶加入這個元標記在您的網站停止變焦/捏：

：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

，或者如果它可以使用下面的小黑客一個非常微小的X滾動效果

body { 
    overflow: hidden; 
    overflow-y: auto; 
    }

它會停止任何水平滾動效果。

2017-09-05 19:22:02

這是解決這類問題的不正確方法。最好先確定哪些元素導致網頁在視口寬度之外展開，然後對其進行修改，使其在移動設備上正常運行。您正在提供一個快速的解決方法，並且這些問題會帶來更大的問題。 – WebsitesOntario

，但他表示，該網站在Android設備上工作正常，所以也許不存在某些元素寬度的問題。爲什麼我建議元標記解決方案。每個網站都會將meta標記（width = device-width）設置爲更好的響應。 –

感謝您的回答，但是此解決方案無法正常工作 – Danil

這似乎是頁面CSS正在使這個爛攤子。即使在我的Mac上的Safari瀏覽器也會遇到同樣的問題。請確保你的CSS。

就我所知的，通過我這是造成問題的頁面

的CSS屬性了。如果你使用％代替'px'會更好的解決你的問題。

謝謝！保持編碼。

2017-09-05 19:29:06 Prakash

如果使用固定寬度，則可能會導致問題。使用**

寬度：100％

2017-09-05 19:30:39

回答