是否可以防止单个容器在移动设备上扩展？

Question

我想要实现的目标是：

除导航容器外，让整个页面缩小。我重写了一些CSS规则，使其在智能手机上更容易访问，但问题是它使用了很多图像，我需要以原始大小显示它们（1图像px = 1设备屏幕px）。

有没有什么技术可以实现这个目标？

Answer 1

我没有上下文所以它更难，但也许你可以用JavaScript和CSS实现它，这样：

1）检测设备宽度，并将其与文档宽度

进行比较

要检索文档宽度，您可以使用我在某处找到的代码段：

var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0];
var width = w.innerWidth||e.clientWidth||g.clientWidth;

然后将比率除以screen.width：

var ratio = width / screen.width;

---

所以，假设设备宽度为320px（iPhone potrait），页面为980px（通常为iPhone渲染）。

980/320 = 3.0625。

---

2）将内容缩放/缩放到该比率

您可以使用CSS transforms

执行此操作

-ms-transform: scale(3.0625);
-webkit-transform: scale(3.0625);
-o-transform: scale(3.0625);
-moz-transform: scale(3.0625);
transform: scale(3.0625);

现代浏览器和IE的

或CSS zoom：

zoom:3.0625;

或使用jQuery UI Effects，或使用jQuery Transit，或使用HTML5 canvas scale（如果您的目标是画布），或使用纯JavaScript：

document.getElementById("idOfTheContent").style.width = document.getElementById("idOfTheContent").style.width * 3.0625;
document.getElementById("idOfTheContent").style.height = document.getElementById("idOfTheContent").style.height * 3.0625;

或....你可以找到任何缩放/缩放方法。

在任何情况下我都不确定音阶的精确度（实际处理逗号后的位数，但我认为即使将它舍入为整数也可以）以及它将如何呈现。

让我知道它是否成功： - ）