移动/平板电脑上的响应式站点、页眉和页脚宽度问题

Question

我一直在研究一个修改过的 wordpress 网站（大量修改的主题），并且遇到了与 css/响应相关的问题。

当 body 有一个异常宽的 item，或者一个宽度超出 body 的动态 item（宽度上是动态的，如 jQuery DataTable）时，站点页眉和页脚无法正确扩展以占据全部身体的宽度。

如需现场示例，请访问此链接（但您将需要使用用户代理修饰符或使用 chrome 模拟器，例如，其中任一设置为 iPad 或 iPhone）。

图片示例：

http://vicariauction.com/cars-coffee/

（注意页眉和页脚不会扩展到正文中“地图”图像的宽度）

-- 这是上面页面的屏幕截图的链接，显示了确切的问题：

i.imgur.com/BUjzLAK.jpg

jQuery 数据表示例：

http://vicariauction.com/future-auctions/?ahcode=NOLA%202015

（请注意页眉和页脚不会扩展到下面的 jquery 数据表的宽度）

-- 这是上面页面的屏幕截图的链接，显示了确切的问题：

i.imgur.com/4nx2M5v.jpg

如果使用移动设备或平板设备（或用户代理）以外的任何设备，则页眉和页脚的宽度都可以正确缩放。

我意识到答案可能不是一个简单的解释，但谁能至少指出我应该寻找解决方案的大致方向？

谢谢！

Answer 1

与其让标题变宽，不如让图像变窄？无论如何，移动用户都不应该水平滚动。

要使图像适合屏幕的宽度，请在图像上使用以下 CSS 样式：

max-width: 100%;
height: auto;

我知道这只能回答您的部分问题，但这绝对是我会对图像做的事情。

---

在不相关的注释中，我注意到在 future-auctions/styleau.css 第 18 行中，您有以下行：

*{box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}

带前缀的 CSS 规则应始终放在首位，因此该行的正确书写方式是：

*{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}