Отключить масштабирование в режиме веб-просмотра?

Как отключить масштабирование при react-native web-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>

Ответ 1

Думал, что это может помочь другим, я решил это, добавив в заголовок следующее:

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

Ответ 2

Для тех, кто хочет получить четкую идею:

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

Ответ 3

Попробуйте scalesPageToFit={false} больше информации здесь

Ответ 4

Для любого в будущем я решил это, добавив следующий css:

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

Вышеуказанное в основном отключает выбор текста для всех элементов, которые во время моего тестирования запретили масштабирование на веб-странице. FYI: Я не погружался глубоко в детали, просто заявляя о его последствиях.

Ответ 5

Мне удалось отключить масштабирование, выбор текста и другие события указателя, обернув WebView в View и установив несколько реквизитов:

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

Ответ 6

Немного хакерских вещей, но это работает

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

Примечание: начальный масштаб = 1, максимальный масштаб = 0,99, масштабируемый пользователем = 0

Ответ 7

Поместите этот атрибут в Webview pointerEvents="none" или обведите Webview другим представлением с помощью этого атрибута.