javascript - jQuery 或 Javascript 模拟移动双击屏幕调整大小

Question

更新如下:

我需要有关在移动设备上调用 DoubleTap 以调整屏幕内容大小以适应页面上所有内容的帮助。

在不解释我需要这个的所有详细原因的情况下，我会说我正在调用一个脚本来更新照片，但它会使照片太大。

用户只需双击文档即可解决大小问题。一旦用户双击文档，如果它离开屏幕，它就会在 Android 和移动设备上调整大小......但我想为他们做这件事，这样他们就不必为了整洁起见。

如何在用户不点击文档的情况下为移动设备自动模拟双击，以便调整内容大小以适合屏幕？我希望页面在图片更新并显示自己太大。

下面的第一个图像显示了调用脚本并使图像离开屏幕后页面的外观。第二张图片显示了用户双击文档以调整其大小以适合后的样子。我想为他们自动执行此操作。

我无法使用 CSS 或响应式图片的原因。该代码覆盖了两个图像并制作了一个配置文件框架。如果我调整它的大小或使用 css，那么当我渲染它时最终图像就会被弄乱。我尝试了所有这些选项几个小时。我唯一的想法是，也许我可以模拟移动设备双击文档以调整大小的功能。这可能吗？

谢谢

更新:我发现 css zoom: 80% 等可以工作。但现在我只需要根据图片的大小来计算缩放百分比。图像将始终具有 512 宽度。与 512px 等相比，我如何获得基于屏幕宽度的百分比？

Answer 1

根据图片与设备宽度获取缩放百分比:

let picWidth = $('#my-img').width();
let deviceWidth = $(window).width();
let zoom = (deviceWidth / picWidth) * 100;

如果设备为 410px 而图片为 512px，则缩放将为 (410/512) * 100 ~ 80%。只需确保图片宽度不为 0。