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

316

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

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

html css mobile

— Мартин Фиксман
источник

3

Как сказал выше Грег, если я захожу на мобильный сайт, который отключает масштабирование, первое, что я обычно делаю, - нажимаю кнопку «назад» (если это не то, что мне действительно нужно просматривать), и я уверен, что я не единственный , Кроме того, исходя из моего опыта, большинство сайтов, на которых отключено масштабирование, также используют мелкие шрифты, что в результате делает чтение текста трудным и очень неудобным.

— tomasz86

8

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

— Люк

11

Вы не ... Если пользователи хотят увеличить, то пусть они делают это. Кроме того: Chrome имеет возможность просто игнорировать ваш запрос.

— Мартин

2

Для пользователей Android Firefox есть дополнение Always Zoom для Firefox . Настоятельно рекомендуется.

— Колин Д. Беннетт

2

С прошивкой 10 , user-scalable=noигнорируется. Смотрите это

— Raptor

443

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

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

— kgutteridge
источник

23

это также отключает возможность масштабирования пользователя в целом, а также возможность браузера автоматически настраивать то, как страница вписывается в область просмотра - все, что ищет Мартин, - это способ отключить «увеличение при нажатии». поведение.

— Мэтт Лохкамп

3

Прямо сейчас кто-то в Posterous сделал именно это, имея шрифт в 12px, поэтому он не читается, и я не могу найти способ обойти это.

— Эмиль Иванов

41

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

— Джек Маркетти

6

Что делает второй метатег? Разве width=device-widthуже нет в первом метатеге?

— Люк

1

Похоже, это не работает на iOS 7. Смотрите ответ

— lukad03

159

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

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

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

— Люк Келлер
источник

7

Это правильный ответ сейчас. Другие ответы больше не работают (по крайней мере, для iOS 7).

— KyleFarris

7

Кто-нибудь пробовал это на iOS 10.x Не думаю, что это работает?

— JMac

Не работает для меня Он изменил размеры всего экрана с полосой прокрутки и плохим масштабированием.

— Cocorico

1

Все еще не работает над Safari / iOS 11 из-за проблемы SFB в Apple.

— 15ee8f99-57ff-4f92-890c-b56153

52

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

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

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

— SW4
источник

«Обычно пользователи не должны быть ограничены», но при разработке веб-приложений для мобильных устройств вам часто приходится сталкиваться с «фокусом на вводе». Я считаю полезным отключить масштабирование в этом случае.

— Ле Нтон

@ Le'nton отключение масштабирования на всей странице - не очень хороший способ справиться с увеличением фокуса ввода. По крайней мере, на iOS масштабирование ввода можно отключить, увеличив размер шрифта ввода.

— PFG

39

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

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

— Бенни Нойгебауэр
источник

35

Поскольку до сих пор нет решения для первоначальной проблемы, вот мои два чистых 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;
  }
}

Развернуть фрагмент

— Азамат Расулов
источник

2

Почему у этого решения так мало голосов? На сегодняшний день это лучший способ избежать масштабирования при щелчке по форме.

— KlausCPH

1

Да; это решило и мою проблему! Я не хотел полностью отключать масштабирование, и это было как раз то, что мне было нужно.

— Брендан

1

Вы также можете установить font-size: 1remдля всей страницы, чтобы шрифт хорошо масштабировался, одновременно избегая проблемы "focus-on-zoom".

— Итачи

12

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

<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

не должно touch-actionбыть установлено на none- developer.mozilla.org/en-US/docs/Web/CSS/touch-action#Values

— rahulroy9202

@ rahulroy9202 у меня touch-action: manipulation;сработало нормально. touch-action: none;ничего не делал

— Umair

7

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

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

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

— Api
источник

2

Это должно быть принято исправление, также работает на мобильном сафари ios13 atm

— Magico

Работает, как и ожидалось, с мобильного, спасибо! проверьте здесь proyecto26.com/animatable-component

— jdnichollsc

6

Возможное решение для веб-приложений: хотя масштабирование больше нельзя отключить в 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'/>

— denkquer
источник

1

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

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

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

— Касуми Гунасекара
источник

-1

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

Пожалуйста, добавьте скрипт, чтобы отключить пинч, нажмите, сфокусируйтесь

— Prem
источник