Disable zoom on web-view react-native?

2020-02-27 11:06发布

站内问答 / Android
2347 7 6

How to disable zoom on react-native web-view,is there a property like hasZoom={false}(just an example) that can be included in the below web-view tag that can disable zooming. It has to be working on both android and ios.

<WebView
     ref={WEBVIEW_REF}
     source={{uri:Environment.LOGIN_URL}}
     ignoreSslError={true}
     onNavigationStateChange={this._onNavigationStateChange.bind(this)}
     onLoad={this.onLoad.bind(this)}
     onError={this.onError.bind(this)}
 ></WebView>

7条回答
【Aperson】
2楼-- · 2020-02-27 11:07

For anyone in the future, I solved this by adding the following css :

*:not(input) {
  user-select: none;
}

The above basically disable text selection on all elements, which during my testing disallowed zooming on webpage. FYI: I haven't dived deep into details, just stating its effects.

查看更多
0人赞 添加讨论(0) 举报
姐就是有狂的资本
3楼-- · 2020-02-27 11:10

Try scalesPageToFit={false} more info in here

查看更多
0人赞 添加讨论(0) 举报
倾城　Initia
4楼-- · 2020-02-27 11:16

Thought this might help others, I solved this by adding the following in the html <head> section:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">

查看更多
0人赞 添加讨论(0) 举报
聊天终结者
5楼-- · 2020-02-27 11:16

I was able to disable zooming, text selection and other pointer events by wrapping WebView in a View and setting a few props:

<View pointerEvents="none">
  <WebView
    source={{ uri: webviewUrl }}
    scrollEnabled={false}
  />
</View>
查看更多
0人赞 添加讨论(0) 举报
兄弟一词,经得起流年.
6楼-- · 2020-02-27 11:17

Put this attribute to Webview pointerEvents="none" , or wrap the Webview by other view with this attribute.

查看更多
0人赞 添加讨论(0) 举报
何必那么认真
7楼-- · 2020-02-27 11:22

Little hacky stuff but it works 

const INJECTEDJAVASCRIPT = 'const meta = document.createElement(\'meta\'); meta.setAttribute(\'content\', \'width=device-width, initial-scale=1, maximum-scale=0.99, user-scalable=0\'); meta.setAttribute(\'name\', \'viewport\'); document.getElementsByTagName(\'head\')[0].appendChild(meta); '



<WebView
        injectedJavaScript={INJECTEDJAVASCRIPT}
        scrollEnabled
        ref={(webView) => {
          this.webView = webView
        }}
        originWhitelist={['*']}
        source={{ uri: url }}
        onNavigationStateChange={(navState) => {
          this.setState({
            backButtonEnabled: navState.canGoBack,
          })
        }}
      />

Note initial-scale=1, maximum-scale=0.99, user-scalable=0

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)