Question

朋友让我用一个空白域显示问题。 http://www.omnisine.com/是第一个，将其加载到PC和手机上（移动设备已自动重定向到index-mobile.php）。 http://www.omnisine.com/index2.php在pc上也是如此，对于移动设备，它重定向到index-mobile2.php；这是通过控制视口的window.devicePixelRatio脚本缩放的。您将在第二个视图中看到，移动区域地图图像现在非常适合移动设备使用，但是与主窗口相比，任务栏确实很小。在主图像映射脚本之前或之后添加的任何元素都会发生这种情况。

无论规模大小，两者的PC外观基本相同。请注意，在单击区域图之前首先加载的主图像以全分辨率（无论设备大小或dpi）加载，也就是在Java外部作为背景CSS图像加载的图像。

此处的代码缩放整个页面，在这里我只想缩放客户端Javascript图像映射（usa_map_720_alt_5_tiles.jpg和usa_map_720_alt_4_tiles.jpg）移动页面视图中的2张图像。缩放解决了img问题，但将与图像映射脚本无关的整个HTML和CSS元素弄乱了。

他们恰好在下面的链接中谈论我想要的，但这是针对网络游戏的。问题是他们必须使用devicePixelRatio缩放比例将页面缩放为1，这会使游戏在视口中呈现为HD，但是所有HUD元素都很小：我的问题！底部有一个解决方案，但我不知道如何应用。

deviceNormalPixelRatio: proposal for zoom-independent devicePixelRatio for HD Retina games

任何帮助都会得到回报。我仍然在学习javascript以及基本上其他所有东西，这个问题困扰着我，因为我只是在做大量的项目，这就是我的学习方式。

谢谢，杰森

更新：因此，下面的缩放方法也存在其他问题。它在移动设备（甚至是iPhone X）上运行速度较慢，并在横向模式下破坏了区域地图。通常，这可以解决，因为整个页面都没有缩放。或它们必须只是在客户端或服务器端编辑原始图像地图代码的一种方法。在此问题上的任何帮助将大有帮助。我可以使用CSS创建所有这些功能吗？

<script type="text/javascript">
   var scale = 1 / (window.devicePixelRatio || 1);   
var content = 'width=device-width, initial-scale=' + scale + ', minimum-scale=' + scale;

document.querySelector('[name="viewport"]').setAttribute('content', content);
</script>

独立于window.devicePixelRatio移动版的缩放版本

0 个答案: