Question

我被要求帮助这个网站：www.backincontrolbook.com

在PC浏览器上，它看起来像应该是什么样子。但是，在移动设备上（在iPad和iPhone上测试），标题占用两行，不必要地覆盖页面上的第一个标题。有关调整标题而不进行完整重新设计的任何提示吗？

我没有制作网站，但我是WordPress网站的管理员。

如果您需要更多信息，请与我们联系。感谢。

Answer 1

一种解决方案是在页面加载时使用一点JavaScript来获取标题的高度，然后使用它来设置其下面内容的包装器的上边距。我设置的一个小例子有助于说明这个解决方案。

HTML（简化）：

<div id="header">
    <!-- Header links go in here -->
</div>
<div id="wrapper">
    <!-- Content goes in here -->
</div>

<强> JavaScript的：

// Only fires when document is loaded, attaching callback to window
window.onload = function(){

    // Gets element with id "header", and stores its height in variable
    var headerH = document.getElementById("header").offsetHeight;

    // Uses height to set margin-top of the content wrapper, which has id "wrapper"
    document.getElementById("wrapper").style.marginTop = headerH + "px";
};

现在，即使标题在较窄的屏幕上突破多行，其下方的内容也不会被覆盖，因为它将有足够的上边距将其推到标题的底部以下。

以上是上述代码的JSFiddle demonstration，其中包含一些额外的内容/ CSS。尝试调整“结果”窗格的大小，直到标题链接断开多行（并隐藏页面顶部），然后按“运行” - 内容应该再次完全可见。

希望这有帮助！如果您对此有任何疑问，请与我们联系。

修复了在移动设备上无法正常显示的标题

1 个答案: