有没有什么好方法可以通过简单的JS / css缩放移动设备中的固定宽度元素？

Question

说我有一些具有这种结构的HTML：

<div style="width:800px">
  <...... a lot of complicated stuff in it>
</div>

我想让div在移动设备上工作。但是，我不想使用媒体查询来编写许多新设置。相反，我想直接将div缩放到较小的尺寸。

所以我尝试了

$('div').css('zoom', .5);

但是如何找到0.3值的最佳值，例如0.5或zoom？由于某些限制，我无法将包装纸的宽度更改为100％。

#zoomthis {background:red; width:99px;height:99px;margin:0 auto}
#wrap {width:500px;background:yellow;}

#zoomthis1 {background:red; width:99px;height:99px;margin:0 auto}
#wrap1 {width:500px;background:yellow;zoom:.5}

<div id="wrap">
  <div id="zoomthis"> OK </div>
</div>

<br><br><br>

<div id="wrap1">
  <div id="zoomthis1"> OK </div>
</div>

顺便说一句，我可以在CSS中仅使用zoom吗？