react-native-webview scalesPageToFit - ios

Question

In Webview props I set the scalesPageToFit prop to false. In android OS I get nice and good view of the webview. but on IOS I get small view of the webview as shown in desktop, because this prop is not supported in IOS. I tried to add the property contentMode={'mobile'} but no change.

is there any other prop that might do the job or is there anything else that could help?

Environment:

• OS: Ios
• OS version: *
• react-native version: 0.63.4
• react-native-webview version: 10.9.2, 11.0.0

Answer 1

I used injectedJavaScriptBeforeContentLoaded as prop of the webview and injected meta label to the head tag of the html. this is the code I injected

setTimeout(function () {
  var met = document.createElement('meta');
  met.content = 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1';
  met.charset = 'UTF-8';
  met.name = 'viewport';
  var head = document.getElementsByTagName("head")[0];
  head.append(met);
}, 500)

Answer 2

Here's what worked for me:

My webview:

      <View style={styles.viewWrapper}>
        <WebView onNavigationStateChange={this.onNavigationStateChange} ref=. 
        {this.WEBVIEW_REF} style={styles.webviewStyle} source={{ uri: 
        this.state.link }} />
      </View>

My styles:

  import {
   Dimensions
  } from 'react-native';

const deviceHieght = Dimensions.get('window').height;
const webViewHieght = deviceHieght-80;

viewWrapper: {
  height: webViewHieght
}, 

webviewStyle: {
  width: '100%',
  height: 50000,
  flex: 1
 },

The reason why I'm subtracting 80 from deviceHeight is because of the size of my header. I've set the height of my webviewStyle very high because I have a long webpage that I want people to be able to scroll down. The page this webview is in has an outer view with a flex of 1.

So basically, for your needs I would just modify this to be whatever height and width you want.

Answer 3

Uri's example worked and as I dug into this more to find out why I simplified the solution for my project. I had control of the html the device was trying to show so I changed the meta tag to:

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

I found this on w3 schools article on viewports https://www.w3schools.com/css/css_rwd_viewport.asp

You could use Uri's meta code to insert the above if needed.