有没有可能阻止单个容器在移动端伸缩？

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图像)，页面为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;

或者你可以在周围找到的with....any缩放/缩放方法。

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

如果工作正常，请让我知道:-)