如何使用 javascript 在移动设备上放大 div？答案

【问题标题】：How to zoom on a div on mobile device with javascript?如何使用 javascript 在移动设备上放大 div？
【发布时间】：2023-03-19 10:58:01
【问题描述】：

也许是一个线索：

    <meta name="viewport" content="width='+ my div Width+'", initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

【问题讨论】：

【解决方案1】：

元标记在第一次解析您的页面时被浏览器使用，但在那段时间之后不会重新评估或访问。

理论上，您可以通过将用户转发到特定事件的新页面来调整比例，将比例设置为特定数量并滚动到您正在寻找的页面上的位置（井号标签）。话虽如此，除非您可以正确预缓存这些页面，否则您将在移动设备上产生大量加载时间。

有关放大画布的信息，请参阅 this question。

基本上，对于移动设备，您不太可能获得想要的功能，但您可能能够以直观的方式为用户模仿它。

例如“用户点击图片”

1) 哈希标签更改以滚动到图像

window.location.hash = "#image"

2) 将图片大小调整为 100% 宽度

$('#my_image').attr('width', '100%')

3)分配监听器以在用户再次交互时缩小

$(document.body).click( function() { 
  $('#my_image').removeAttr('width', null);
});

希望这将帮助您解决问题。

【讨论】：

【解决方案2】：

window.location.hash = "yourDivId";

这将滚动到 div 的位置。您实际上无法使用 JavaScript 放大，但您可以使用 jQuery 为 div 的大小和位置设置动画，并调整文本的大小，使其看起来像放大了一样。（见http://api.jquery.com/animate/）

【讨论】：