2016-12-15 96 views
0

這是一個廣泛涉及本網站和其他論壇的主題。其他用戶聲稱發佈的解決方案固定了他們的水平滾動問題,但沒有人爲我工作。有些答案建議使用jQuery來抵消滾動問題,但在我走下這條路之前,我想獲得第二個意見。Html Javascript網站刪除手機上的水平滾動條

這裏是我的codepen鏈接:

http://codepen.io/dsemel/pen/WrYBye

而且這並不會工作。

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

它看起來在我的筆記本還可以,但各地的幻燈片在我的iPhone。

謝謝你的時間。

回答

0

之所以你的網站有一個水平滾動條是因爲<p>元素具有400px一個固定的寬度,我改變了對100%一切工作正常。

這裏的固定<p>造型的片段在line 36

p { 
    padding-bottom:100px; 
    height:100px; 
    width: 100%; 
    padding-top:10px; 
} 
+0

此外,元視口標記應該是

+1

謝謝Emad。我真的很感激它,有趣的是,這樣的小細節可能會導致多少麻煩,以及它是如何意識到它們的重要性。謝謝! –

0

你好,

使用<meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />爲了設定寬度設備寬度。

+0

我已經做到了。這是我現在的代碼的一部分。 –

0

不回答只是建議

我有這個問題,意識到有對夫妻我的div默認填充。只要檢查你的div的填充%可能會影響溢出問題。還拼寫錯誤在您的CSS ...溢出 - Y:隱藏不隱藏。抱歉,我不能提供更多的幫助,運氣好的話....

html{ 
    overflow-x:hidden; 
    overflow-y:hideen;} ***change for hidden***