title: How to get basic html in chrome web view input text to scaling like other text elements or bad chrome user agent?
body: <p>Working on a bare bones html page - and noticed in the web view that input boxes and associated labels are not scaling to the view like other text elements, odd behaviour?</p>
  
  <p>Web view being physical phone (pixel 2) and desktop chrome mobile emulation.
  Bot showing the input box much smaller, actully its scaling all the other elements, mostly text (dl/spans) from 16px to 29.3px</p>
  
  <p>Only css added is setting font-family, and disabling this has not difference.</p>
  
  <p>When copied a label and placed else where on page, it scales.</p>
  
  <p>Default chrome (as far as I know, unless plug-in causing issues)
  Chromes user agent does have a lot of css on the input. Is this just bad chrome default css, or something missing maybe in the meta to help alleviate this issue</p>
  
  <p>Inputs near the top of this image. Left is Emulated web view, but get same issue on hardware device. Right side is normal desktop view.</p>
  
  <p>Chrome browser.
  FireFox does not appear to demonstrate this behaviour.
  Attempted running in JSFiddle and could not get it to show the same issue.</p>
  
  <p><a href="https://i.stack.imgur.com/TOwUh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TOwUh.png" alt=""></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;&lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;title&gt;My Comics&lt;/title&gt;
      &lt;style&gt;
          body {
              font-family: 'Courier New', Courier, monospace
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;!-- next task:  On edit - fill with that issues details --&gt;
  
  &lt;body&gt;
      &lt;header&gt;
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li&gt;Menu item&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/header&gt;
  
      &lt;h1&gt;My Comics JSON&lt;/h1&gt;
      &lt;input type="file" accept=".json" id="global-load"&gt;
  
      &lt;label for="search-series"&gt;Series&lt;/label&gt;
      &lt;input type="text" id="search-series" class="search-input" data-search="Series"&gt;
      &lt;label for="search-issue"&gt;Issue&lt;/label&gt;
      &lt;input type="text" id="search-issue" class="search-input" data-search="IssueID"&gt;
      &lt;label for="search-issue"&gt;All&lt;/label&gt;
      &lt;input type="text" id="search-depth" class="search-input" data-search="Depth"&gt;
      &lt;i id="search-state" style="display: none;"&gt;searching...&lt;/i&gt;
  
      &lt;div id="stats"&gt;
          &lt;label&gt;Series&lt;/label&gt;&lt;h1&gt;View Stats&lt;/h1&gt;
          &lt;dl&gt;
              &lt;dt&gt;Series&lt;/dt&gt;&lt;dd class="stat-info Series"&gt;0&lt;/dd&gt;
              &lt;dt&gt;Have&lt;/dt&gt;&lt;dd class="stat-info Have"&gt;8&lt;/dd&gt;
              &lt;dt&gt;Issues&lt;/dt&gt;&lt;dd class="stat-info Issues"&gt;8&lt;/dd&gt;
              &lt;dt&gt;Duplicates&lt;/dt&gt;&lt;dd class="stat-info Dups"&gt;0&lt;/dd&gt;
          &lt;/dl&gt;
      &lt;/div&gt;
  
      &lt;div id="main-body"&gt;
              &lt;section&gt;
                  &lt;h1 class="Name"&gt;X-23 vol. 3 (2018)&lt;/h1&gt;
                  &lt;ul class="Issues"&gt;
                  
              &lt;li&gt;
                  &lt;input class="Have" title="I have" type="checkbox"&gt; 
                  #&lt;span class="IssueID"&gt;1&lt;/span&gt; 
                  &lt;span class="CoverDate" data-format="[$]"&gt;[___ 2018]&lt;/span&gt;
                  &lt;span class="Title"&gt;&lt;/span&gt; 
                  &lt;span class="Type"&gt;&lt;/span&gt; 
                  &lt;span class="Collection"&gt;&lt;/span&gt;  
                  &lt;span class="Paid"&gt;£4.20&lt;/span&gt;  
                  &lt;span class="Where"&gt;Travelling Man, Manchester&lt;/span&gt;  
                  &lt;span class="When"&gt;2018-08-11&lt;/span&gt;  
                  &lt;!-- &lt;span class="Purchase"&gt;&lt;/span&gt; &lt;button class='edit'&gt;edit&lt;/button&gt; --&gt;
              &lt;/li&gt;
          
              &lt;li&gt;
                  &lt;input class="Have" title="I have" type="checkbox"&gt; 
                  #&lt;span class="IssueID"&gt;2&lt;/span&gt; 
                  &lt;span class="CoverDate" data-format="[$]"&gt;[___ 2018]&lt;/span&gt;
                  &lt;span class="Title"&gt;&lt;/span&gt; 
                  &lt;span class="Type"&gt;&lt;/span&gt; 
                  &lt;span class="Collection"&gt;&lt;/span&gt;  
                  &lt;span class="Paid"&gt;£3.30&lt;/span&gt;  
                  &lt;span class="Where"&gt;Forbidden Planet International, Manchester&lt;/span&gt;  
                  &lt;span class="When"&gt;2018-09-15&lt;/span&gt;  
                  &lt;!-- &lt;span class="Purchase"&gt;&lt;/span&gt; &lt;button class='edit'&gt;edit&lt;/button&gt; --&gt;
              &lt;/li&gt;
          
              
          
              
          
              
          
              
          
              
          
              
          &lt;/ul&gt;
              &lt;/section&gt;
          &lt;/div&gt;
      
      &lt;div id="series-view"&gt;
      
      &lt;/div&gt;
      
      &lt;div id="item-view"&gt;
      
      &lt;/div&gt;
      
      &lt;div id="series-edit"&gt;
      
      &lt;/div&gt;
      
      &lt;!--
      &lt;div id="item-edit"&gt;
          &lt;form class="edit"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;input type="text" class="key" value="IssueID" readonly&gt;&lt;input type="number" class="value"&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label&gt;&lt;input class="Have" data-Property="Have" title="I have" type="checkbox" /&gt; Have&lt;/label&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;input type="text" class="key" value="Paid"&gt;&lt;input type="text" class="value"&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;input type="text" class="key" value="Where"&gt;&lt;input type="text" class="value"&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;input type="text" class="key" value="When"&gt;&lt;input type="text" class="value"&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;input type="text" class="key" &gt;&lt;input type="text" class="value"&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;button type="button" id="edit-add-kvp"&gt;Add Detail&lt;/button&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;input class="edit-apply" type="submit" value="Apply" /&gt;
          &lt;/form&gt;
      &lt;/div&gt;--&gt;
      
      &lt;div style="display:none"&gt;
          &lt;template id="series-template"&gt;
              &lt;section&gt;
                  &lt;h1 class="Name"&gt;&lt;/h1&gt;
                  &lt;ul class="Issues"&gt;
                  &lt;/ul&gt;
              &lt;/section&gt;
          &lt;/template&gt;
          &lt;template id="series-issue"&gt;
              &lt;li&gt;
                  &lt;input class="Have" title="I have" type="checkbox"&gt; 
                  #&lt;span class="IssueID"&gt;&lt;/span&gt; 
                  &lt;span class="CoverDate" data-format="[$]"&gt;&lt;/span&gt;
                  &lt;span class="Title"&gt;&lt;/span&gt; 
                  &lt;span class="Type"&gt;&lt;/span&gt; 
                  &lt;span class="Collection"&gt;&lt;/span&gt;  
                  &lt;span class="Paid"&gt;&lt;/span&gt;  
                  &lt;span class="Where"&gt;&lt;/span&gt;  
                  &lt;span class="When"&gt;&lt;/span&gt;  
                  &lt;!-- &lt;span class="Purchase"&gt;&lt;/span&gt; &lt;button class='edit'&gt;edit&lt;/button&gt; --&gt;
              &lt;/li&gt;
          &lt;/template&gt;
          &lt;template id="edit-issue"&gt;
              &lt;form class="edit"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;input type="text" class="key" value="IssueID" readonly=""&gt;&lt;input type="number" class="value"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;label&gt;&lt;input class="Have" data-property="Have" title="I have" type="checkbox"&gt; Have&lt;/label&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;input type="text" class="key" value="Paid"&gt;&lt;input type="text" class="value"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;input type="text" class="key" value="Where"&gt;&lt;input type="text" class="value"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;input type="text" class="key" value="When"&gt;&lt;input type="text" class="value"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;input type="text" class="key"&gt;&lt;input type="text" class="value"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;button type="button" id="edit-add-kvp"&gt;Add Detail&lt;/button&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;input class="edit-apply" type="submit" value="Apply"&gt;
              &lt;/form&gt;
          &lt;/template&gt;
      &lt;/div&gt;
      
      &lt;footer&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Help Center&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Sitemap&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;h5&gt;a MazeEditing attempt&lt;/h5&gt;
  &lt;!--        &lt;img src="facebook-logo.png"&gt;
          &lt;img src="twitter-logo.png"&gt;
          &lt;img src="linkedin-logo.png"&gt; --&gt;
      &lt;/footer&gt;
  
  &lt;/body&gt;&lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>