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

Question

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

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

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

435

html css mobile

Источник

user305597 17 дек '10 в 17:00

16 ответов

Другие вопросы по тегам html css mobile

user131410 17 дек '10 в 17:02 2010-12-17 17:02 · Answer 1 · 2010-12-17 17:02

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

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

611

Источник

user131410 17 дек '10 в 17:02

user810794 20 янв '14 в 22:35 2014-01-20 22:35 · Answer 2 · 2014-01-20 22:35

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

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

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

198

Источник

user810794 20 янв '14 в 22:35

user404335 25 ноя '14 в 12:45 2014-11-25 12:45 · Answer 3 · 2014-11-25 12:45

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

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

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

user2547985 04 мар '20 в 01:08 2020-03-04 01:08 · Answer 4 · 2020-03-04 01:08

Похоже, что простое добавление метатегов в index.html не мешает масштабированию страницы. Добавление стиля ниже сотворит чудеса.

:root {
  touch-action: pan-x pan-y;
  height: 100% 
}

РЕДАКТИРОВАТЬ: Демо: https://no-mobile-zoom.stackblitz.io/

69

Источник

user2547985 04 мар '20 в 01:08

user8486692 19 авг '17 в 08:53 2017-08-19 08:53 · Answer 5 · 2017-08-19 08:53

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

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

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;
  }
}

user451634 22 авг '12 в 12:10 2012-08-22 12:10 · Answer 6 · 2012-08-22 12:10

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

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

user4783719 07 окт '18 в 05:49 2018-10-07 05:49 · Answer 7 · 2018-10-07 05:49

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

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


<style>
body{
        touch-action: manipulation;
    }
</style>

17

Источник

user4783719 07 окт '18 в 05:49

user10094651 14 июл '19 в 03:30 2019-07-14 03:30 · Answer 8 · 2019-07-14 03:30

Возможное решение для веб-приложений. Хотя масштабирование больше нельзя отключить в 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 бар Aswell как варианты обмена отключены. (Вы все еще можете проводить пальцем влево и вправо) Однако этот подход позволяет использовать такие приложения, как ux. Полноэкранный браузер запускается только тогда, когда сайт загружается с домашнего экрана. ~~Я также заставил его работать только после того, как я включил apple-touch-icon-180x180.png в свою корневую папку.~~

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

<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent'/>

user8140254 12 апр '20 в 08:15 2020-04-12 08:15 · Answer 9 · 2020-04-12 08:15

<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>

Добавьте скрипт, чтобы отключить сжатие, нажатие, фокус Zoom

10

Источник

user8140254 12 апр '20 в 08:15

user12870561 04 дек '22 в 06:44 2022-12-04 06:44 · Answer 10 · 2022-12-04 06:44

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

чистый"user-scalable=no"достаточно, и исключение других параметров ширины и масштаба должно подойти для вашего случая. В моем случае я просто добавил фрагмент в свой файл . Проверено на iOS 16.

5

Источник

user12870561 04 дек '22 в 06:44

user7489818 09 ноя '17 в 04:08 2017-11-09 04:08 · Answer 11 · 2017-11-09 04:08

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

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

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

user1134856 03 янв '21 в 17:13 2021-01-03 17:13 · Answer 12 · 2021-01-03 17:13

Решение с использованием meta-tag не работал у меня (проверено на Chrome win10 и Safari IOS 14.3), и я также считаю, что проблемы доступности, упомянутые Джеком и другими, должны быть учтены.

Мое решение - отключить масштабирование только тех элементов, которые повреждены масштабированием по умолчанию.

Я сделал это, зарегистрировав слушателей событий для жестов масштабирования и используя event.preventDefault() чтобы подавить поведение масштабирования по умолчанию в браузерах.

Это нужно сделать с помощью нескольких событий (сенсорные жесты, колесо мыши и клавиши). Следующий фрагмент - это пример колесика мыши и жестов сжатия на сенсорных панелях:

      noteSheetCanvas.addEventListener("wheel", e => {
        // suppress browsers default zoom-behavior:
        e.preventDefault();

        // execution my own custom zooming-behavior:
        if (e.deltaY > 0) {
            this._zoom(1);
        } else {
            this._zoom(-1);
        }
    });

Здесь описано, как определять сенсорные жесты: /questions/15306286/samyij-prostoj-sposob-obnaruzhit-schepotku/15306312#15306312

Я использовал это, чтобы сохранить стандартное поведение масштабирования для большинства частей моего приложения и определить настраиваемое поведение масштабирования для элемента холста.

user1826956 28 май '21 в 18:38 2021-05-28 18:38 · Answer 13 · 2021-05-28 18:38

Используя этот пост и несколько других, мне удалось разобраться в этом, чтобы он был совместим с Android и iPhone / iPad / iPod, используя следующий код. Это для PHP, вы можете использовать ту же концепцию для любого другого языка с поиском строк.

      <?php //Device specific headers
$iPod    = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone  = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad    = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
$Android = stripos($_SERVER['HTTP_USER_AGENT'],"Android");
$webOS   = stripos($_SERVER['HTTP_USER_AGENT'],"webOS");

if($iPhone || $iPod || $iPad){
    echo '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />';
} else {
    echo '<meta name="viewport" content="width=device-width, initial-scale=1.0" />';
}

?>

user10643020 11 ноя '21 в 06:41 2021-11-11 06:41 · Answer 14 · 2021-11-11 06:41

Кому-то это может помочь: на iOS моя проблема решилась заменой <button>с для <div>с., наряду с другими упомянутыми вещами.

-1

Источник

user10643020 11 ноя '21 в 06:41

user7546060 01 ноя '20 в 13:01 2020-11-01 13:01 · Answer 15 · 2020-11-01 13:01

document.addEventListener('dblclick', (event) => {
    event.preventDefault()
}, { passive: false });

-1

Источник

user7546060 01 ноя '20 в 13:01

user4783719 20 сен '17 в 04:09 2017-09-20 04:09 · Answer 16 · 2017-09-20 04:09

Некоторые метатеги вида на устройство не будут работать. В этом случае вы можете добавить этот скрипт

$(document).on('touchmove', false);

например:

</head>
<body>
<script>$(document).on('touchmove', false);</script>
</body>

-1

Источник

user4783719 20 сен '17 в 04:09