如何防止我的網站被水平滾動？

Question

我想讓我的網站與不同的設備兼容。在電腦上，只顯示內容，用戶不能水平滾動。在iPhone的肖像模式中，有一個水平滾動條。我嘗試使用overflow-x來防止這種情況發生，但它不能解決問題。這裏是website的臨時鏈接。這個問題在橫向模式下不會發生。這是它看起來像iPhone：

Answer 1

我看來像罪犯是在這裏的標記：

<p id="footerP">Mykyta Solonko 2016</p> 

的風格有這樣的規則：

#footerP { 
    left: 1090px 
} 

，是造成這段落在屏幕的最右側呈現。很難看到B/C在淺色背景下呈白色。

刪除該規則和右邊的空間消失。

Answer 2

隨着喬納森添加了什麼，你還設置了導致水平滾動的寬度兩個div。

<div id="main"> 
<div id="header"> 
<div id="pln"> 

這些分別被設定爲700像素，650像素和500像素，這意味着，如果使用的是其具有320像素的寬度的iPhone 5，用戶將必須水平sroll觀看該內容的該其餘部分自您正在告訴瀏覽器將提到的元素設置爲該寬度。

將這些設置爲百分比值或您知道的值小於「標準」小屏幕的值。

隨着視口大小的改變，您還需要重構頁面的佈局。這是你頁面的最大問題，而不是具體的CSS規則，但是你的內容的結構。

嘗試勾畫基於桌面，平板電腦和智能手機作爲目標的頁面結構，然後從那裏設計每個頁面。