title: Understanding Bootstrap Layout on Phone
body: <p>I am trying to create a mobile-only site using ASP.NET MVC and Bootstrap. I've created a form, part of which appears below.</p>
  
  <pre><code>&lt;form action="/Client/InitializeProgram" class="form-horizontal" method="post" role="form"&gt;
  
      &lt;div class="wizard-step"&gt;
  
          &lt;h4&gt;General Information&lt;/h4&gt;
  
          &lt;div class="form-group"&gt;
              &lt;label class="col-md-2 control-label" for="DateOfBirth"&gt;Date of Birth&lt;/label&gt;
              &lt;div class="col-md-10"&gt;
                  &lt;input Placeholder="MM/DD/YYYY" class="form-control" data-val="true" data-val-date="The field Date of Birth must be a date." data-val-required="Date of birth is required" id="DateOfBirth" name="DateOfBirth" type="text" value="" /&gt;
                  &lt;span class="field-validation-valid" data-valmsg-for="DateOfBirth" data-valmsg-replace="true"&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;label class="col-md-2 control-label" for="Gender"&gt;Gender&lt;/label&gt;
              &lt;div class="col-md-10"&gt;
                  &lt;div class="radio"&gt;
                      &lt;input checked="" id="Gender_0" name="Gender" type="radio" value="0"&gt;&lt;/input&gt;
                      &lt;label for="Gender_0"&gt;Male&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="radio"&gt;
                      &lt;input id="Gender_1" name="Gender" type="radio" value="1"&gt;&lt;/input&gt;
                      &lt;label for="Gender_1"&gt;Female&lt;/label&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;label class="col-md-2 control-label"&gt;Height&lt;/label&gt;
              &lt;div class="col-md-10"&gt;
                  &lt;input Placeholder="Feet" class="form-control" data-val="true" data-val-number="The field HeightFeet must be a number." data-val-required="The height feet is required" id="HeightFeet" name="HeightFeet" type="text" value="" /&gt;
                  &lt;span class="field-validation-valid" data-valmsg-for="HeightFeet" data-valmsg-replace="true"&gt;&lt;/span&gt;
                  &lt;input Placeholder="Inches" class="form-control" data-val="true" data-val-number="The field HeightInches must be a number." data-val-required="The height inches is required" id="HeightInches" name="HeightInches" type="text" value="" /&gt;
                  &lt;span class="field-validation-valid" data-valmsg-for="HeightInches" data-valmsg-replace="true"&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I'm using my Android phone for testing and have noticed something strange. When the page with my form is fist loaded, everything fits within my phone's display, exactly as expected.</p>
  
  <p>But when I click in one of the text boxes, it appears to zoom in slightly, making my page content a little wider than my phone. So a small portion of the page is not visible unless I scroll horizontally.</p>
  
  <p>If I rotate my phone into landscape orientation, the display is wider. However, it appears that phone zooms again so that the page is again a little too wide for the display (by about the same percent).</p>
  
  <p>I can't tell what's going on and am having trouble finding anything on this. Has anyone here seen this? Can anyone explain what's happening? My preference is to format my page so that it fits within my device's display.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>If it makes any difference, I have the following in <code>&lt;head&gt;</code> section of my page.</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  </code></pre>
  
  <p>Also, I have the following CSS on this page. It was provided by someone else who was helping me to get my tables to fit within the phone screen.</p>
  
  <pre><code>body {
    padding-top: 50px;
    padding-bottom: 20px;
  }
  
  /*
  Re-enable word wrapping in table cells.
  Can we simplify with .table-responsive &gt; .table th, .table-responsive &gt; .table td ?
  */
  @media screen and (max-width: 767px) {
     .table-responsive&gt;.table&gt;thead&gt;tr&gt;th, 
     .table-responsive&gt;.table&gt;tbody&gt;tr&gt;th, 
     .table-responsive&gt;.table&gt;tfoot&gt;tr&gt;th, 
     .table-responsive&gt;.table&gt;thead&gt;tr&gt;td, 
     .table-responsive&gt;.table&gt;tbody&gt;tr&gt;td,  
     .table-responsive&gt;.table&gt;tfoot&gt;tr&gt;td {
        white-space: normal;
     }
  }
  </code></pre>