Как я могу «отключить» масштабирование на мобильной веб-странице? - PullRequest
Новая
       50

Как я могу «отключить» масштабирование на мобильной веб-странице?

290 голосов
/ 17 декабря 2010

Я создаю мобильную веб-страницу, которая представляет собой большую форму с несколькими текстовыми вводами.

Однако (по крайней мере, на моем мобильном телефоне Android), каждый раз, когда я нажимаю на какой-либо ввод, вся страница там увеличивается, скрывая остальную часть страницы. Есть ли какая-нибудь команда HTML или CSS, чтобы отключить этот вид масштабирования на мобильных веб-страницах?

Ответы [ 8 ]

400 голосов
/ 17 декабря 2010

Это должно быть все, что вам нужно 

<meta 
     name='viewport' 
     content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' 
/>
149 голосов
/ 21 января 2014

Для тех из вас, кто опаздывает на вечеринку, ответ kgutteridge не работает для меня, и ответ Бенни Нойгебауэра включает target-densitydpi (функция , которая устарела ).

Это, однако, работает для меня: 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
48 голосов
/ 25 ноября 2014

Здесь есть несколько подходов, и хотя позиция такова, что обычно пользователи не должны быть ограничены , когда дело доходит до масштабирования в целях доступности, могут быть случаи, когдатребуется:

Рендеринг страницы по ширине устройства, не масштабировать: 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Запретить масштабирование - и запретить пользователю возможностьдля увеличения: 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Снятие всего масштабирования, все масштабирование 

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
39 голосов
/ 22 августа 2012

Вы можете использовать: 

<head>
  <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
  ...
</head>

Но учтите, что с Android 4.4 свойство target-densitydpi больше не поддерживается .Так что для Android 4.4 и более поздних версий в качестве лучшей практики предлагается следующее: 

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
16 голосов
/ 19 августа 2017

Так как до сих пор нет решения для начальной проблемы, вот мои чистые два цента CSS.

Мобильные браузеры (большинство из них) требуют, чтобы размер шрифта на входах составлял 16 пикселей. Так 

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
  font-size: 16px;
}

решает проблему. Так что вам не нужно отключать масштабирование и потерять специальные возможности вашего сайта.

Если ваш базовый размер шрифта не равен 16px или не равен 16px на мобильных устройствах, вы можете использовать медиазапросы. 

@media screen and (max-width: 767px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"] {
    font-size: 16px;
  }
}
9 голосов
/ 07 октября 2018

попробуйте добавить этот метатег и стиль 

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


<style>
body{
        touch-action: manipulation;
    }
</style>
1 голос
/ 09 ноября 2017

Вы можете выполнить задачу, просто добавив следующий элемент «meta» в свою «голову»: 

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

Добавление всех атрибутов, таких как «ширина», «начальный масштаб», «максимальная ширина», «максимальный масштаб», может не работать. Поэтому просто добавьте вышеуказанный элемент.

0 голосов
/ 14 июля 2019

Возможное решение для веб-приложений: хотя масштабирование больше нельзя отключить в iOS Safari, будет отключено при открытии сайта с помощью ярлыка главного экрана.

Добавьте эти метатеги, чтобы объявить ваше приложение «способным к веб-приложению»: 

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta name='apple-mobile-web-app-capable' content='yes' />

Однако только используйте эту функцию, если ваше приложение является самодостаточным, поскольку кнопки «Вперед» и «Назад» и панель URL, а также параметры общего доступа отключены. (Вы все еще можете провести пальцем влево и вправо, хотя) Этот подход, однако, позволяет использовать такое приложение, как ux. Полноэкранный браузер запускается только тогда, когда сайт загружается с домашнего экрана. Я также получил его на работу только после того, как я включил apple-touch-icon-180x180.png в мою корневую папку.

В качестве бонуса вы, вероятно, также захотите включить вариант этого сообщения: 

<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent'/>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...