how to block zoom in html code example

Example 1: mobile prevent zoom

<meta 
     name='viewport' 
     content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' 
/>

Example 2: how to disable zoom in html page on different screen resolutions

<!DOCTYPE html>
<html>
  <head>
    <title>Disable the Zoom</title>
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <style>
      body {
        width: 500px;
        border: 3px solid #4a91d8;
      }
      h1 {
        color: #4a91d8;
        text-align: center;
        text-shadow: 1px 3px 2px #000;
      }
      p {
        font-size: 18px;
        padding: 5px 0;
        margin: 10px;
        width: 220px;
        height: 320px;
        border: 2px solid #4a91d8;
      }
      div::after {
        content: "";
        clear: both;
        display: table;
      }
      p:first-child {
        float: left;
      }
      p:last-child {
        float: right;
      }
    </style>
  </head>
  <body>
    <h1> 
      Lorem Ipsum
    </h1>
    <div class="clearfix">
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
      </p>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
      </p>
    </div>
  </body>
</html>

Tags:

Css Example

Recent Posts