'materializecss google apps responsive mobile font size

I have written a google web app using materializecss. All works well on a laptop. I have designed it to be responsive, testing by reducing the width of the browser on my laptop and again, it workds well.

But, when I try it on an actual android phone using chrome, it is correctly reducing the number of columns, but I can barely read the text as it is soo small. It looks like the screen is laptop width, with each of the input fields taking the full width. When I click on any field, it goes maximum zoom to somewhere on the page and I have to scroll around to find the field I have clicked on, then zoom out a little. Sorry I can't explain any more, its wierd.

I have created a simple test by copying the 'Getting Started' code and 'Text Input' code from the materialize website and exactly the same thing happens.

There's not a lot in the form-JS, I have just been trying some Materialize form inits.

It looks fine when you run it in the code snippet on in a browser on a laptop, but when you try it on a phone it goes all wrong.

  document.addEventListener('DOMContentLoaded', function() {
  //  M.updateTextFields();
    M.AutoInit();
  });

<!DOCTYPE html>
<html>
  <head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>

  <body>

    <div class="container">
      <div class="row">
        <form class="col s12">
          <div class="row">
            <div class="input-field col s12 l6">
              <input placeholder="Placeholder" id="first_name" type="text" class="validate">
              <label for="first_name">First Name</label>
            </div>
            <div class="input-field col s12 l6">
              <input id="last_name" type="text" class="validate">
              <label for="last_name">Last Name</label>
            </div>
          </div>
          <div class="row">
            <div class="input-field col s12">
              <input disabled value="I am not editable" id="disabled" type="text" class="validate">
              <label for="disabled">Disabled</label>
            </div>
          </div>
          <div class="row">
            <div class="input-field col s12">
              <input id="password" type="password" class="validate">
              <label for="password">Password</label>
            </div>
          </div>
          <div class="row">
            <div class="input-field col s12">
              <input id="email" type="email" class="validate">
              <label for="email">Email</label>
            </div>
          </div>
          <div class="row">
            <div class="col s12">
              This is an inline input field:
              <div class="input-field inline">
                <input id="email_inline" type="email" class="validate">
                <label for="email_inline">Email</label>
                <span class="helper-text" data-error="wrong" data-success="right">Helper text</span>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div> <!-- Close Container -->

    <!--JavaScript at end of body for optimized loading-->
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </body>
</html>

Solution 1:^[1]

I'm not seeing the problem you describe when testing with the code you posted: https://codepen.io/panchroma/pen/ExoegNJ

Maybe there's an issue related to this line
<?!= include("form-JS"); ?>

Are you able to post this form-js file as well?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'materializecss google apps responsive mobile font size

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]