如何在react-native中缩小WebView？

Question

我在react-native中使用“WebView”来渲染网页。该网页没有适合移动设备的用户界面。

当我在 Chrome 浏览器中打开它时，它如下所示。 我想将其渲染如下

但是当我渲染下面的代码时，它看起来如下图所示。 请看我尝试了不同的道具

automaticallyAdjustContentInsets = {false}

，

scalesPageToFit={false}

。但它并没有给我想要的输出。

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

结果

如果您有任何解决方案，请随时提出。任何第三方库也可以。

Answer 1

您的网站已经在元中设置了页面宽度

<meta name="viewport" content="width=1080">

所以你需要用注入的 JavaScript 覆盖它

injectedJavaScript={`const meta = document.createElement('meta'); meta.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=0'); meta.setAttribute('name', 'viewport'); document.getElementsByTagName('head')[0].appendChild(meta); `}
scalesPageToFit={false}

Answer 2

所选答案注入的

user-scalable

属性必须设置为 1 才能启用手动屏幕缩放。

Answer 3

我已经使用这条线来缩放和适应每个移动屏幕上的 WebView 内容

scalesPageToFit={false}

Answer 4

就我而言，我必须将initial-scale=0.5更改为initial-scale=1。我在 webview 中渲染 Google 表单。请看下面的代码。

injectedJavaScript={`const meta = document.createElement('meta'); meta.setAttribute('content', 'width=100, initial-scale=1, maximum-scale=0.5, user-scalable=0'); meta.setAttribute('name', 'viewport'); document.getElementsByTagName('head')[0].appendChild(meta); `}