Scale the page programmatically to fit the screen

[segicm]

Hi, is there a way to scale the page to fit the device screen? This is how I am using the Webshell now:

const Webshell = useMemo(
    () =>
      makeWebshell(
        WebView,
        new HandleHTMLDimensionsFeature(),
        new ForceResponsiveViewportFeature({
          maxScale: 1.5,
          // initScale: 0.65,
          minScale: 0.25,
        }),
        new ForceElementSizeFeature({
          target: 'body',
          heightValue: 'auto',
          widthValue: 'auto',
        }),
        new HandleVisualViewportFeature()
      ),
    []
  );

Responsive pages fit perfectly, but the ones with fixed-width elements will go out of the screen. I need to scale those pages to fit the width of the device screen. I have noticed that when I double-tap the content in the webview, the content gets scaled perfectly. Is there a way to achieve this?

This is how the content looks like on the init render (Gets out of the screen):

And this is how it looks like when I double tap(this is what I need to achieve programmatically):

[ororsatti]

Calc the ratio between the offsetWidth of the page, and the scrollWIdth, and use scaleY to scale down the entire page by the ratio you just found.

[ororsatti]

  const mailContent = document.body;
    const containerWidth = mailContent?.offsetWidth;
    const mailWidth = mailContent?.scrollWidth;
    if(!mailContent || !containerWidth || !mailWidth) return;

    const scale = containerWidth / mailWidth;
    document.body.style.transform = 'scale(' + scale + ')';
    document.body.style.transformOrigin = 'top left';
    
      if (document.readyState !== 'loading') {
    scaleMailToFit();

} else {
  addEventListener('DOMContentLoaded', () => {
    scaleMailToFit();
  });
}

Pass it as a script to the webview, the autohewight height should take care of the changing height.