如何在反应原生中缩小WebView?

时间:2018-05-01 03:15:21

标签: android reactjs react-native webview react-native-android

我正在使用" WebView" in react-native用于呈现网页。该网页没有适合移动设备的用户界面。

当我在Chrome浏览器中打开它时,它看起来如下所示。 我想在下面呈现

enter image description here

但是当我在代码下面渲染时,它看起来像下面显示的图像。 请注意我尝试了不同的道具automaticallyAdjustContentInsets = {false}scalesPageToFit={false}。但它没有给我欲望输出。

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

结果

enter image description here

如果您有任何解决方案,请随时提出建议。任何第三方图书馆也都可以。

2 个答案:

答案 0 :(得分:8)

您的网站的网页宽度已设置为元<meta name="viewport" content="width=1080">

因此您需要使用injectJavaScript

覆盖它

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}

答案 1 :(得分:0)

必须将所选答案的{{1}}属性设置为1,以禁止手动缩放屏幕。