javascript - 移动设备/平板电脑上的响应式网站、页眉和页脚宽度问题

Question

我一直在修改 wordpress 网站(大幅修改主题)，遇到了 css/responsive 相关问题。

当正文有一个异常大宽度的元素，或者一个动态元素(宽度是动态的，比如 jQuery 数据表)，其宽度超出了正文，网站的页眉和页脚不会正确扩展以占据整个空间 body 的宽度。

有关实际示例，请访问此链接(但是您将需要使用用户代理修饰符或使用 chrome 模拟器，例如，将其设置为 iPad 或 iPhone)。

图片示例:

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

(注意页眉和页脚如何不扩展到正文中“ map ”图像的宽度)

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

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;}