Flutter WebView如何自动缩放

发布于 2025-01-13 15:09:43 字数 1199 浏览 3 评论 0原文

我想知道如何在 Flutter WebView 上自动缩放。

我知道用户可以手动缩放 WebView 内容，但我想从一开始就控制它，因为当我将模拟器置于纵向模式时，WebView 中的信息太小，用户无法阅读：

我尝试增加WebView的宽度以使其变大，以便它会自动缩放并且用户可以使用水平滚动来阅读它。

 child: WebView(
                          zoomEnabled: true,
                          initialUrl: Uri.dataFromString('<html><body><iframe src="webpage_url" width="1920" height="700"></iframe></body></html>', mimeType: 'text/html').toString(),
                          javascriptMode: JavascriptMode.unrestricted,
                        ))

这与我用于我的应用程序的 Web 版本的 IFrameElement 配合得很好（Flutter Web 不支持 WebView，android 模拟器也不支持 IFrameElement）

IFrameElement _iframeElement = IFrameElement();
    _iframeElement.height = '750';
    _iframeElement.width = '1920';

这里（我的应用程序的 Web 版本），iframe 会自动相应地缩放我为其定义的宽度和高度：

如何使用 WebView 实现这一目标？

谢谢你的帮助。

原文

I would like to know how to automatically zoom on Flutter WebView.

I know the user can manually zoom on the WebView content, but I would like to control it from the start because when I put the emulator in portrait mode the informations in my WebView are too small for the user to read :

I tried to increase the WebView width to make it larger and so that it would automatically be zoomed and the user could use horizontal scroll to read it.

 child: WebView(
                          zoomEnabled: true,
                          initialUrl: Uri.dataFromString('<html><body><iframe src="webpage_url" width="1920" height="700"></iframe></body></html>', mimeType: 'text/html').toString(),
                          javascriptMode: JavascriptMode.unrestricted,
                        ))

This works well with the IFrameElement that I use for the web version of my app (WebView isn't supported by Flutter Web nor is IFrameElement by the android emulator)

IFrameElement _iframeElement = IFrameElement();
    _iframeElement.height = '750';
    _iframeElement.width = '1920';

Here(web version of my app), the iframe is automatically zoomed accordingly to the width and I height I defined for it :

How do I achieve that using WebView ?

Thanks for helping.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜灵血窟げ 2025-01-20 15:09:43

我认为您可以通过注入元视口来实现此目的（如果尚未存在）与 _controller.runJavascript('your js code');

var flutterViewPort=document.createElement('meta');
flutterViewPort.name = "viewport";
flutterViewPort.content = "width=400, initial-scale=1.0, maximum-scale=1.0, user-scalable=0";
document.getElementsByTagName('head')[0].appendChild(flutterViewPort);

I think you can achieve this by injecting a meta viewport (if not already present) with _controller.runJavascript('your js code');

var flutterViewPort=document.createElement('meta');
flutterViewPort.name = "viewport";
flutterViewPort.content = "width=400, initial-scale=1.0, maximum-scale=1.0, user-scalable=0";
document.getElementsByTagName('head')[0].appendChild(flutterViewPort);

回复收藏 0 原文

听风念你 2025-01-20 15:09:43

您可以将元标记放在字符串的 HTML 文件的标头中。如果您的 html 文件中没有 head 标签，那么您必须创建基本的 html 结构。之后，您必须将元标记放入 head 标记内，如下所示。并将所有其他标签放入正文中

 <html>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
      </head>
    
     <body>
       <p style="color:#D1D1D1;"> Hello world </p>
     </body>

 </html>

You can just put the meta tag in header of the HTML file of string. If you don't have the head tag in your html file then you have to create the basic html structure. After that you have to put the meta tag inside the head tag just like below. And put all other tags in body

 <html>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
      </head>
    
     <body>
       <p style="color:#D1D1D1;"> Hello world </p>
     </body>

 </html>

回复收藏 0 原文

~没有更多了~