手机/平板电脑上的响应站点，页眉和页脚宽度问题

Question

我一直在修改Wordpress网站（主题大量修改）上工作，并且遇到了CSS /响应相关问题。

当主体具有异常大的宽度的项目或宽度超出主体的动态项目（在宽度方面是动态的，例如jQuery DataTable）时，网站的页眉和页脚将无法正确扩展以占据其整个宽度身体。

有关实际示例，请访问此链接（例如，您将需要使用用户代理修饰符或使用chrome仿真器，例如，将两者设置为iPad或iPhone）。

图片示例：

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

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

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

i.imgur.com/BUjzLAK.jpg

jQuery dataTables示例：

（注意页眉和页脚如何不扩展到下面的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;}