I have to display a third party web page (which a I can't edit) on a WebEngineView (version 1.3) on my embedded device. The device has a display with a fixed resolution of 800x480.

This page has this viewport meta tag which is the cause of my problem:

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

Once the page is loaded the content size inside the WebEngineView is correctly 800px. But the user can scroll horizontally and move the content to the left. It seems that once the user start scrolling the page the content width changes to 3200px (checked with some debug print).

I've tried to add a WebEngineScript to remove the meta tag, but it doesn't seems to work:

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);})
      }
   }
}

If I print the inner HTML of the page when the render is completed the meta tag is not present. If I change the injectionPoint to WebEngineScript.DocumentCreation the tag remains.

How can I ignore the meta tag and prevent the unwanted horizontal scrolling?