Question

为了说明我的问题，请看一下以下小提琴：http://jsfiddle.net/ECaD6/

假设我创建了这个网页，其中心（深灰色）区域是页面的主要内容。该内容区域的背景有意地与容器中不包含任何内容的侧面颜色不同。

我绝对放置了一张图片，因此它位于预期内容区域的范围之外。这在桌面浏览器上运行良好。

但是，在移动浏览器中查看时，用户可以缩小页面以便他们看到：

enter image description here

如果浏览器只能缩小到内容容器的宽度，我希望如此。这可能吗？我显然可以在overflow-x:hidden上加div，但实际上它会完全切断足球。

如果移动浏览器只能缩小此范围，那就太好了： enter image description here

我知道技术上图像（在这种情况下）是'内容'的一部分，因为它在内容div中。我想知道是否有任何布局或CSS技巧可以用来实现我正在寻找的东西。

Answer 1

您是否在标题中添加了meta device-width标签？

Answer 2

在您网页的<head>中添加此元标记。

<meta name="viewport" content="initial-scale=1, maximum-scale=1.0, user-scalable=no" />