web-dev-qa-db-ja.com

Webビューのreact-nativeでズームを無効にしますか？

react-nativeweb-viewでズームを無効にする方法は、ズームを無効にできるhasZoom={false}タグに含めることができるweb-view（単なる例）のようなプロパティがあります。 Androidと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
14
Amal p

これは他の人にも役立つかもしれないと思ったので、ヘッダーに次を追加してこれを解決しました。

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

27
shahonseven

明確なアイデアが必要な人向け：

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
 />
10
Amal p

scalesPageToFit={false}こちら の詳細

7
Ismail Iqbal

WebViewでViewをラップし、いくつかの小道具を設定することで、ズーム、テキスト選択、その他のポインターイベントを無効にすることができました。

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

ちょっとハッキーなものですが、それは動作します

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

注 initial-scale = 1、maximum-scale = 0.99、user-scalable = 0

0
ganesh konathala

将来的には、次のcssを追加してこれを解決しました。

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

上記は基本的にすべての要素のテキスト選択を無効にしますが、テスト中にウェブページのズームは許可されませんでした。参考までに、詳細については詳しく説明していませんが、その効果について述べています。

0
dchhetri