如何在react-native中缩小WebView? [英] How to Zoom out in WebView in react-native?

问题描述

我正在使用"WebView"在反应本地渲染网页.该网页没有适合移动设备的用户界面.

I am using "WebView" in react-native for rendering a web page. The web page doesn't have mobile-friendly UI.

当我在Chrome浏览器中打开它时，如下图所示.我想像下面这样

When I open it in Chrome Browser, it looks like below. AND I WANT TO RENDER IT LIKE BELOW

但是当我渲染下面的代码时，它看起来像下面的图像.请注意，我尝试了不同的道具 automaticallyAdjustContentInsets = {false} ， scalesPageToFit = {false} .但这并没有给我想要的输出.

But When I render below code, it looks like the image shown below. Please see that I have tried different props automaticallyAdjustContentInsets = {false} , scalesPageToFit={false}. But it's not giving me the desire output.

render(){
    const URL  = "https://stellarterm.com";
    return(
          <WebView 
             source={{URL}}
          />

结果

如有需要，请随时提出任何解决方案.任何第三方库也都可以.

推荐答案

您的网站已在meta中设置了页面宽度<元名称="viewport" content ="width = 1080">

Your site has page width set in meta already <meta name="viewport" content="width=1080">

因此，您需要使用jectedJavaScript覆盖

So you will need to override that with injectedJavaScript

<代码>injectionJavaScript = {`const meta = document.createElement('meta');meta.setAttribute('content'，'width = device-width，initial-scale = 0.5，maximum-scale = 0.5，user-scaleable = 0');meta.setAttribute('name'，'viewport');document.getElementsByTagName('head')[0] .appendChild(meta);}scalesPageToFit = {false}

这篇关于如何在react-native中缩小WebView?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！