How to Zoom out in WebView in react-native?

蓝咒 提交于 2019-12-01 08:54:28

问题


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

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

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}}
          />

Result

Please feel free to suggest any solution if you have. Any third party library will also be okay.


回答1:


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

So you will need to override that with injectedJavaScript

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}




回答2:


The user-scalable property on the selected answer's injection must be set to 1 to enbale manual screen scaling.



来源:https://stackoverflow.com/questions/50110920/how-to-zoom-out-in-webview-in-react-native

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!