wake-up-neo.net

Deaktivieren Sie das Zoomen auf die Webansicht.

Zum Deaktivieren des Zoomens auf react-nativeweb-view gibt es eine Eigenschaft wie hasZoom={false} (nur ein Beispiel), die in den unten stehenden web-view-Tag eingefügt werden kann, der das Zoomen deaktivieren kann.

<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> 
12
Amal p

Ich dachte, das könnte anderen helfen, ich habe das Problem gelöst, indem ich Folgendes in die Kopfzeile eingefügt habe:

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

20
shahonseven

Für diejenigen, die eine klare Idee haben wollen:

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

scalesPageToFit={false} weitere Informationen in hier

5
Ismail Iqbal

Kleine hacky Sachen, aber es funktioniert

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

Hinweis anfängliche Skala = 1, maximale Skala = 0,99, benutzerskalierbar = 0

0

Ich konnte das Zoomen, die Textauswahl und andere Zeigerereignisse deaktivieren, indem Sie WebView in eine View einwickeln und einige Requisiten setzen:

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

Für jeden in der Zukunft habe ich dieses Problem gelöst, indem ich folgende CSS hinzugefügt habe:

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

Die obigen Optionen deaktivieren die Textauswahl grundsätzlich für alle Elemente, was das Zoomen auf Webseiten während meines Tests nicht zulässt. Zu Ihrer Information: Ich bin nicht tief in Details eingetaucht und habe nur die Auswirkungen angegeben.

0
dchhetri