如何防止我的网站被水平滚动？

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规则，但是你的内容的结构。

尝试勾画基于桌面，平板电脑和智能手机作为目标的页面结构，然后从那里设计每个页面。