web-dev-qa-db-fra.com

Désactiver le zoom sur la vue Web react-native?

Comment désactiver le zoom sur react-nativeweb-view, existe-t-il une propriété comme hasZoom={false} (juste un exemple) qui peut être incluse dans la balise web-view ci-dessous qui peut désactiver le zoom . Elle doit fonctionner à la fois sur Android et 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>
androidioswebviewreact-nativehybrid-mobile-app
12
Amal p

Bien que cela puisse aider les autres, j'ai résolu le problème en ajoutant ce qui suit dans l'en-tête:

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

20
shahonseven

Pour ceux qui veulent une idée claire:

const 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); `

 <WebView
  source={{ html: params.content.rendered }}
  scalesPageToFit={isAndroid() ? false : true}
  injectedJavaScript={INJECTEDJAVASCRIPT}
  scrollEnabled
 />
7
Amal p

Essayez scalesPageToFit={false} plus d'infos dans ici

5
Ismail Iqbal

J'ai pu désactiver le zoom, la sélection de texte et d'autres événements de pointeur en enveloppant WebView dans une View et en définissant quelques accessoires:

<View pointerEvents="none">
  <WebView
    source={{ uri: webviewUrl }}
    scrollEnabled={false}
  />
</View>
0
jmwicks

Pour tout le monde à l'avenir, j'ai résolu ce problème en ajoutant le css suivant:

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

Ce qui précède désactive fondamentalement la sélection de texte sur tous les éléments, ce qui lors de mes tests a interdit le zoom sur la page Web. FYI: Je n’ai pas plongé dans les détails, je me suis contenté d’énoncer ses effets.

0
dchhetri