Wie kann man den Zoom auf einer mobilen Webseite mit HTML und CSS deaktivieren

Die Zoom-Option ist nicht immer sinnvoll. Eine der häufigsten Unannehmlichkeiten für Entwickler und Benutzer ist der Zoom auf mobile Webseiten. Nun, wir sind hier, um Ihnen zu helfen, dieses Problem zu lösen. Sie können einfach den Browser Surefox verwenden, um die Zoom-Option zu deaktivieren, aber trotzdem wird die Seite durch Doppeltippen auf dem Bildschirm ein- und ausgezoomt, so dass Sie besser die von HTML und CSS vorgeschlagenen Methoden testen.

1. Wie kann man den Zoom mit HTML deaktivieren

Der häufigste Weg, den Zoom zu deaktivieren, ist die Verwendung von HTML-Tag <meta> tag. Das Attribut user-scalable ermöglicht es dem Gerät, ein- und auszuzoomen. Sie müssen den Wert “no” für dieses Attribut definieren, um die Zoomoption zu deaktivieren.

Es muss so aussehen:

<meta name="viewport" content="width=device-width, user-scalable=no">

Lassen Sie uns nun ein Beispiel versuchen, um es klarer zu machen.

Beispiel

<!DOCTYPE html> 
<html>
  <head>
    <title> 
      Zoom deaktivieren
    </title>
    <meta 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 ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete.
      </p>
      <p> 
        Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete.
      </p>
    </div>
  </body>
</html>

Lassen Sie uns ein anderes Beispiel betrachten:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>
      Zoom deaktivieren
    </title>
    <meta meta name="viewport" content="width=device-width, user-scalable=no" />
    <style>
      body { 
      width:630px; 
      border: 3px solid #4a91d8; 
      height:auto;
      } 
      h1{
      color: #4a91d8;
      text-align:center;
      text-shadow: 1px 3px 2px #000;
      }
      img{
      border:2px solid black;
      margin:5px;
      }
      div::after {
      content: "";
      clear: both;
      display: table;
      }
      .left{
      float:left;
      }
      .right{
      float:right;
      }
    </style>
  </head>
  <body>
    <div>
      <h1>
        Houses
      </h1>
      <img src="https://cdn.vox-cdn.com/thumbor/RVclEmJ7_fDjExXPmUtHZ2nOeCU=/0x0:3000x2000/1200x800/filters:focal(1260x760:1740x1240)/cdn.vox-cdn.com/uploads/chorus_image/image/60890575/LizKuball_180512_0066_HighRes_Bungalow_Heaven.0.jpg" alt="House 1"  width="396" class="left" />
      <img src="https://www.boutiquehomes.com.au/sites/default/files/400_Montauk%2047%20and%2049%20-%20Greyson%20facade.jpg" alt="House 2"  width="196" class="right" />
      <img src="https://ichef.bbci.co.uk/news/660/cpsprodpb/8B96/production/_105243753_house.jpg" alt="House 3" width="396" class="left"/>
      <img src=
        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVAFvLYZXJ3xBEFRTnXe60ANdxJVCCisVXdkFzWKwJbCEjKMwxYw" alt="House 1" width="196" height="101" class="right"/>
      <p>
        <strong>Hinweis:</strong>
        Auf dem Handy nicht zoombar
      </p>
    </div>
  </body>
</html>
Verwenden Sie kein reaktionsschnelles Meta-Tag, wenn Ihre Website nicht speziell darauf ausgelegt ist, reaktionsschnell zu sein und bei dieser Größe gut zu funktionieren, da das die Benutzererfahrung verschlechtert.

2. Wie kann man den Zoom mit CSS deaktivieren

Wenn Sie ein HTML-Tag <input> verwenden, zoomt das IOS, wenn die CSS-Eigenschaft font-size auf weniger als 16 px definiert ist. Versuchen Sie also, eine davon in Ihr CSS einzufügen:

Es wird so aussehen:

input[type='text'],
input[type='number'],
input {
font-size: 16px;
}

Lassen Sie uns ein Beispiel zu betrachten.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      input { font-size: 16 px; }
      input:focus{font-size:16px;}
    </style>
  </head>
  <body>
    <form action="getform.php" method="get">
      Ihr Vornameame: <input type="text" name="first_name" />
      Ihr Name: <input type="text" name="last_name" />
      E-Mail-Adresse eingeben: <input type="email" name="user_email" />
      <input type="submit" value="Absenden" />
    </form>
  </body>
</html>

Wenn Sie WP verwenden, müssen Sie möglicherweise !important nach dem 16px hinzufügen, um die Theme-Vorgabe zu überschreiben.

Versuchen Sie folgendes:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
select,
textarea,
input {
font-size: 16px;
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) { 
select:focus,
textarea:focus,
input:focus {
font-size: 16px;
}
}

Lassen Sie uns ein Beispiel Betrachten.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      input { font-size: 16 px; }
      input:focus{font-size:16px;}
      @media screen and (-webkit-min-device-pixel-ratio:0) { 
      select,
      textarea,
      input {
      font-size: 16px;
      }
      }
      @media screen and (-webkit-min-device-pixel-ratio:0) { 
      select:focus,
      textarea:focus,
      input:focus {
      font-size: 16px;
      }
      }
    </style>
  </head>
  <body>
    <form action="getform.php" method="get">
      Ihr Vorname: <input type="text" name="first_name" />
      Ihr Name: <input type="text" name="last_name" />
      E-Mail-Adresse eingeben: <input type="email" name="user_email" />
      <input type="submit" value="Absenden" />
    </form>
  </body>
</html>