Question

如何在不使用Javascript的情况下在本地级别（即不是整个页面）上实现移动设备上的捏缩放功能？到目前为止，我可以通过使用META视口标记来缩小整个页面。

我看过CSS touch-action: pinch-zoom，但奇怪的是，它根本不执行其名称所暗示的，但显然只是作为对其他与缩放无关的动作的修改。但是，this page讨论了touch-action应该如何工作以允许浏览器本身具有本机的捏缩放功能，这表明应该可以实现。

我已经尝试使用IFRAME来做到这一点，但是显然没有达到使它起作用所需的正确属性：

pztest1.html

<!doctype html>  
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pinch-Zoom Test IFRAME contents</title>
</head>
<body>
  <H1>This is a test</H1>
  <p>Test, test, test.</p>
</body>
</html>

此页面单独缩小，但仅显示整个页面。因此，我将内容放在另一个页面的IFRAME中：

pztest2.html

<!doctype html>  
<html lang="en">
  <head>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Pinch-Zoom Test</title>
  </head>
  <body>
    <h1>IFRAME test</h1>
    <iframe src="pztest.html" height="640" width="480">
    </iframe>
  </body>
</html>

我无法在pztest2.html中完全缩放，无论是在主体（预期）中还是在IFRAME本身中。如果我从pztest2.html删除了meta标签，则可以使用它来缩放pztest.html和iframe的主体，但是我不能仅缩放IFRAME本身，这就是目标。

捏放大没有JavaScript

0 个答案: