HTML disable browser zooming

user_6949429 0
Viewed 2808

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.

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.

Here is the code, any ideas what is wrong?

<HTML>
  <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <style>
     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: "Segoe UI";
        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: "left";
     }
     input[type=checkbox]:checked + label:before {
        background-color: #00256A;
        content: "\2713"; 
        display: inline-block;
        vertical-align: middle;
        font-size: 63.7795275590551px;
        height: 63.7795275590551px;
        width: 63.7795275590551px;
        font-family: "Arial";
        border: 3px solid  #009AE1;
        float: "left";
        color: #009AE1;
     }
     .largeFontSize {
        background-color: #00256A;
        foreground-color: #FFFFFF;
        color: #FFFFFF;
        font-size:32.90625pt;
        font-family: "Segoe UI";
        font-weight: Normal;
      }
      body { 
        background-color: #00256A;
        foreground-color: #FFFFFF;
        color: #FFFFFF;
        font-size: 10.96875pt;
        font-family: "Segoe UI";
        font-weight: Normal;
      }
      input, select { 
        font-size:32.90625pt;
        font-family: "Segoe UI";
        font-weight: Normal;
        border: none; 
      }
      label, select
      {
        background-color: #00256A;
        foreground-color: #FFFFFF;
        color: #FFFFFF;
        font-size: 10.96875pt;
        font-family: "Segoe UI";
        font-weight: Normal;
      }
     </style>
  </head>

  <script language="javascript" type="text/javascript">
      function CreateDeviceDescription()
      {
          return "foobar:" + document.getElementById("deviceID").value + "," + document.getElementById("foo").value
      }
      function ValidateChanges()
      {
           javascript:window.external.validateDeviceID(CreateDeviceDescription());
      }
      function GetDeviceDetails()
      {
           return CreateDeviceDescription();
      }
   </script>
   <BODY bgcolor="#000000">
     <div id=Content>
        <center>ID<center><input type="text" value="" maxlength="25" size="9" id="deviceID" oninput="ValidateChanges()"/><br><br>
        <span style="white-space: nowrap;"><center>Some title<center></span><input type="text" value="" maxlength="7" size="4" id="Freq" oninput="ValidateChanges()"/>
        <script>
           window.onload = function() {
              var bar= document.getElementById("foobar");
              bar.focus();
              bar.value = bar.value;
              };
        </script>
     </div>
   </BODY>
</HTML>
zooming scaling html
3 Answers

I'm not quite sure what you mean but I've assumed you're talking about the user intentionally zooming in a page, using browser tools.

It is impossible to disable desktop zoom features as this is part of the browser and not something your website could change. You might be able to disable the zooming keyboard shortcuts, however I would recommend against it - it's not usually good practice to disable user shortcuts.

In mobile however, if you want to prevent zooming, your current meta tag <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> should work.

user_99187440

Not working on a desktop but working on iOS

document.addEventListener('touchmove', event => event.scale !== 1 && event.preventDefault(), { passive: false });
user_30625250

There is no way to disable zooming on a desktop. If your approach doesn't work as intended on mobile, try this instead.

<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width, height=device-height, target-densitydpi=device-dpi">
user_84261770
Related