时间戳

首页 > 解决方案 > 元标记视口使用 QML WebEngineView 在页面上添加不需要的空间

javascript - 元标记视口使用 QML WebEngineView 在页面上添加不需要的空间

问题描述

我必须在嵌入式设备上的 WebEngineView（1.3 版）上显示第三方网页（我无法编辑）。该设备有一个固定分辨率为 800x480 的显示器。

这个页面有这个视口元标记，这是我的问题的原因：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

加载页面后，WebEngineView 内的内容大小正确为 800 像素。但是用户可以水平滚动并将内容向左移动。似乎一旦用户开始滚动页面，内容宽度就会变为 3200px（通过一些调试打印进行检查）。

我试图添加一个 WebEngineScript 来删除元标记，但它似乎不起作用：

WebEngineScript {
   id: removeMeta
   injectionPoint: WebEngineScript.DocumentReady
   sourceCode: "document.querySelector(\"[name='viewport']\").remove();"
}

WebEngineView {
   ind: webview
   ...
   userScripts: [ removeMeta ]
   ...

   onLoadingChanged: {
      if (loadRequest.status === WebEngineView.LoadSucceededStatus
      {
          var js = "document.documentElement.outerHTML";
          webview.runJavaScript(js, function(result){console.log(result);})
      }
   }
}

如果我在渲染完成后打印页面的内部 HTML，则元标记不存在。如果我将 injectionPoint 更改为WebEngineScript.DocumentCreation标签仍然存在。

如何忽略元标记并防止不需要的水平滚动？

标签： javascripthtmlcssqmlqwebengineview

解决方案

推荐阅读