CODEWITHSUNDEEP
htmlzoomingscaling
Edwin Martin
Edwin Martin

Reputation: 339

HTML disable browser zooming

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>

Upvotes: 3

Views: 14631

Answers (3)

Dmitry Vasilev
Dmitry Vasilev

Reputation: 6538

Not working on a desktop but working on iOS

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

Upvotes: 2

Aarivex
Aarivex

Reputation: 45

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">

Upvotes: 1

wyatt
wyatt

Reputation: 57

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.

Upvotes: 1

Related Questions