Smartphone keyboard messing up page layout

Question

I have a similar problem to Android Keyboard shrinking the viewport and elements using unit vh in CSS. I'm making a react.js app and my login box is scaled with vh and vw units, but when keyboard appears on the screen it gets scaled differently. Is there a way to set viewport constant globally or do I need to use hooks?

Login.js:

import React from 'react';
...
import { Container, Row, Col, Button, Form, FormGroup, Label, Input } from 'reactstrap';
import useMediaQuery from '@material-ui/core/useMediaQuery';

import './Login.css';

function Login() {
  const smartphone = useMediaQuery('(max-width:600px)');
  const between = useMediaQuery('(max-width:780px)');
  const tablet = useMediaQuery('(max-width:1000px)');

  return (
      <div>
            <Navigation/>
            <Background/>
            <BackgroundCover/>

        <Row style={{height:'25vh'}}></Row>

        <Container style={{position:'relative', zIndex: '1'}}>

        <Form className='logBox'>
          <Row>
        <Col  xs='4' sm='7' md='9'></Col>
          <Col  xs='8' sm='5' md='3'>
          <h1 className='loginHeader'>Login</h1>
            <FormGroup className={smartphone? 'textBoxSmartphone' : between? 'textBoxDefault' : tablet? 'textBoxTablet' : 'textBoxDefault'}>
              <Input
                type="text"
                name="text"
                placeholder="e-mail"
              />
            </FormGroup>

            <FormGroup className={smartphone? 'textBoxSmartphone' : between? 'textBoxDefault' : tablet? 'textBoxTablet' : 'textBoxDefault'}>

              <Input
                type="password"
                name="password"
                id="examplePassword"
                placeholder="password"
              />
            </FormGroup>

          <Button>Submit</Button>
          </Col>
          </Row>

        </Form>
      </Container>

      </div>
  );
}
export default Login;

Login.css:

...

    .logBox{

      position: relative;
      z-index: 100;
    }

    .textBoxSmartphone{
      width: 33vh;
    }

    .textBoxTablet{
      width: 20vw;
    }

    .textBoxBetween{
      width: 25vw;
    }

    .textBoxDefault{

    }