title: HTML disable browser zooming
body: <p>Hi i am trying to disable the web browser zooming on my html. It is important that i am able to disable the zooming as it is a work task that i have no say in.</p>
  <p>I have already researched how to disable zooming but i  must have applied it incorrectly as it does not work as i am still able to zoom in and out which is effecting the webpage.</p>
  <p>Here is the code, any ideas what is wrong?</p>
  <pre><code>&lt;HTML&gt;
    &lt;head&gt;
       &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no&quot;&gt;
       &lt;style&gt;
       table.no-spacing {
          border-spacing: 0
          margin:0;
          border-collapse: collapse; 
       }
       th, td {
          padding: 0px;
          margin: 0px;
          text-align: center;
          font-size: 10.96875pt;
          font-family: &quot;Segoe UI&quot;;
          font-weight: Normal;
       }
       input[type = checkbox] {
          display: none;
       }
       input[type=checkbox] + label:before {
          content: '';
          display: inline-block;
          vertical-align: middle;
          margin-right: 5px;
          height: 63.7795275590551px;
          width: 63.7795275590551px;
          background-color: #00256A;
          border: 3px solid  #009AE1;
          color: #009AE1;
          float: &quot;left&quot;;
       }
       input[type=checkbox]:checked + label:before {
          background-color: #00256A;
          content: &quot;\2713&quot;; 
          display: inline-block;
          vertical-align: middle;
          font-size: 63.7795275590551px;
          height: 63.7795275590551px;
          width: 63.7795275590551px;
          font-family: &quot;Arial&quot;;
          border: 3px solid  #009AE1;
          float: &quot;left&quot;;
          color: #009AE1;
       }
       .largeFontSize {
          background-color: #00256A;
          foreground-color: #FFFFFF;
          color: #FFFFFF;
          font-size:32.90625pt;
          font-family: &quot;Segoe UI&quot;;
          font-weight: Normal;
        }
        body { 
          background-color: #00256A;
          foreground-color: #FFFFFF;
          color: #FFFFFF;
          font-size: 10.96875pt;
          font-family: &quot;Segoe UI&quot;;
          font-weight: Normal;
        }
        input, select { 
          font-size:32.90625pt;
          font-family: &quot;Segoe UI&quot;;
          font-weight: Normal;
          border: none; 
        }
        label, select
        {
          background-color: #00256A;
          foreground-color: #FFFFFF;
          color: #FFFFFF;
          font-size: 10.96875pt;
          font-family: &quot;Segoe UI&quot;;
          font-weight: Normal;
        }
       &lt;/style&gt;
    &lt;/head&gt;
  
    &lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;
        function CreateDeviceDescription()
        {
            return &quot;foobar:&quot; + document.getElementById(&quot;deviceID&quot;).value + &quot;,&quot; + document.getElementById(&quot;foo&quot;).value
        }
        function ValidateChanges()
        {
             javascript:window.external.validateDeviceID(CreateDeviceDescription());
        }
        function GetDeviceDetails()
        {
             return CreateDeviceDescription();
        }
     &lt;/script&gt;
     &lt;BODY bgcolor=&quot;#000000&quot;&gt;
       &lt;div id=Content&gt;
          &lt;center&gt;ID&lt;center&gt;&lt;input type=&quot;text&quot; value=&quot;&quot; maxlength=&quot;25&quot; size=&quot;9&quot; id=&quot;deviceID&quot; oninput=&quot;ValidateChanges()&quot;/&gt;&lt;br&gt;&lt;br&gt;
          &lt;span style=&quot;white-space: nowrap;&quot;&gt;&lt;center&gt;Some title&lt;center&gt;&lt;/span&gt;&lt;input type=&quot;text&quot; value=&quot;&quot; maxlength=&quot;7&quot; size=&quot;4&quot; id=&quot;Freq&quot; oninput=&quot;ValidateChanges()&quot;/&gt;
          &lt;script&gt;
             window.onload = function() {
                var bar= document.getElementById(&quot;foobar&quot;);
                bar.focus();
                bar.value = bar.value;
                };
          &lt;/script&gt;
       &lt;/div&gt;
     &lt;/BODY&gt;
  &lt;/HTML&gt;
  </code></pre>