Question

我正在努力让我的网站与不同的设备兼容。在计算机上，仅显示内容，用户无法水平滚动。在iPhone的纵向模式下，有一个水平滚动条。我尝试使用overflow-x来防止这种情况，但它无法解决问题。这是website的临时链接。在横向模式下不会发生此问题。这就是iPhone上的样子：

Answer 1

在我看来，罪犯就像在标记中一样：

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

样式有这个规则：

#footerP {
  left: 1090px
}

这导致该段落在屏幕的最右侧呈现。很难看到b / c在浅色背景下是白色的。

删除该规则，右侧的空间消失。

Answer 2

除了Jonathan添加的内容之外，还设置了两个div的宽度，这会导致水平滚动。

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

分别设置为700px，650px和500px，这意味着如果您使用宽度为320px的iPhone 5，则用户必须水平滚动以查看其余内容，因为您告诉浏览器将提到的元素设置为该宽度。

将这些值设置为百分比值或您知道的值小于“标准”小屏幕的值。

您还需要在视口大小发生变化时重新构建页面布局。这是您网页的最大问题，而不是特定的CSS规则，而是您内容的结构。

尝试以桌面，平板电脑和智能手机为目标草绘页面结构，然后从那里设计每个页面。