Как отключить масштабирование на мобильной веб-странице с помощью HTML и CSS?

Функция масштабирования не всегда полезна. Одно из неудобств, с которым сталкиваются и разработчики, и пользователи, относится к масштабированию веб-страниц на мобильных устройствах. Мы поможем решить эту проблему. Можно использовать браузер Surefox для отключения этой функции, но все же страница будет масштабироваться при двойном нажатии на экран. Поэтому попробуйте следующие методы, используя HTML и CSS.

1. Как отключить масштабирование с помощью HTML

Самый легкий способ отключения этой функции - это использование HTML тега <meta>. Атрибут user-scalable позволяет увеличить или уменьшить масштаб на мобильном устройстве. Чтобы отключить функцию масштабирования, необходимо задать значение “no” для этого атрибута.

Это будет выглядеть следующим образом:

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

А теперь попробуем пример:

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title> 
      Отключение масштабирования
    </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 - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.
      </p>
      <p> 
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.
      </p>
    </div>
  </body>
</html>

Давайте рассмотрим другой пример:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>
      Отключение масштабирования
    </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>Note:</strong>
        Не масштабируется на мобильных устройствах 
      </p>
    </div>
  </body>
</html>
Не используйте адаптивный метатег, если ваша веб-страница не разработана таким образом, чтобы была адаптивна и хорошо работала в таком масштабе.

2. Как отключить масштабирование с помощью CSS

Если используйте HTML тег <input>, IOS будет масштабировать страницу, если CSS свойство font-size установлено в значение меньше 16 px:

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

Давайте попробуем пример:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      input { font-size: 16 px; }
      input:focus{font-size:16px;}
    </style>
  </head>
  <body>
    <form action="getform.php" method="get">
      Your Name: <input type="text" name="first_name" />
      Your Surname: <input type="text" name="last_name" />
      Enter Your E-Mail: <input type="email" name="user_email" />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Если используете WP, вам может понадобиться добавить !important после 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;
}
}

Давайте посмотрим пример:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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">
      Your Name: <input type="text" name="first_name" />
      Your Surname: <input type="text" name="last_name" />
      Enter Your E-Mail: <input type="email" name="user_email" />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>