我想要实现的是：
让整个页面缩小，除了导航容器。我重写了它的一些 CSS 规则，使其在智能手机上更易于访问，但问题是它使用了很多图像，我需要以原始尺寸显示这些图像（1 图像像素 = 1 设备屏幕像素）。
有什么技术可以实现这一点吗？
问问题
52 次
1 回答
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;
因此，假设设备宽度为 320 像素（iPhone 肖像），页面为 980 像素（通常的 iPhone 渲染）。
980 / 320 = 3.0625。
2）将您的内容缩放/缩放到该比例
您可以使用CSS 转换来做到这一点
-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:3.0625;
或者使用jQuery UI Effects，或者使用jQuery Transit，或者使用HTML5 画布比例（如果你的目标是画布），或者使用纯 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;
或使用....任何您可以找到的缩放/缩放方法。
在任何情况下，我都不确定比例的精度（实际处理了逗号后的位数，但我认为即使将其舍入为整数也可以）以及它将如何呈现。
让我知道它是否有效:-)
于 2012-09-27T23:43:32.480 回答