CSS规模和翻译问题。他们如何正确地做到这一点？

Question

这是所有移动浏览器相关的，而不是桌面。 我正在尝试制作一个特定的div来维持其相对于设备屏幕的尺寸。 因此，当用户放大/缩小时，DIV及其内容（图像）将保持不变，也不会模糊，不会像素化。 XBrowser很难做到。我以为我几乎就在那里，但后来我在iPhone 5S上看到了它，每当我使用我的方法时，它都显得很模糊。

我希望看起来他们可以在website上做到这一点。请在手机上试用，等待页脚启动出现。 他们做得很好，无论你有哪种设备，页脚的底部都会保持不变。 你能帮我建立类似的泼溅行为吗？ 我很接近放弃:(

这是我到目前为止所尝试的内容。一些代码和伪代码：

1. 我获取当前视口的宽度和高度
2. 我通过screen.availWidht和screen.acailheight相应地将vpWidth和vpHeight除以得到scaleW和scaleH。
3. 我在选择放入CSS的比例时遇到问题，所以如果它是肖像，我使用scaleW或者其他，scaleH（这是一个好方法吗？）。
4. 我以这种方式计算元素的左侧和顶部：
5. left = (vpWidth-width*scale)/2; top = (vpHeight-height*scale)/2;其中width和height是div的宽度和高度
6. 我像这样计算'翻译'：translate = -((1 - scale) / 2) * 100;我在网站上看到过这个，我坦率地说，这是有道理的。
7. 然后我将此代码应用于div样式：-webkit-transform:translate(<%= translate + '%' + ',' + translate + '%' %>) scale(<%= scale %>) translateZ(0px);，当然还要添加左侧和顶部属性。
8. 我是CSS中的新手:(所以我从代码和示例中学习。根本不是编码新手。