Я создаю мобильную веб-страницу, которая представляет собой большую форму с несколькими текстовыми вводами.
Однако (по крайней мере, на моем мобильном телефоне Android), каждый раз, когда я нажимаю на какой-либо ввод, вся страница там увеличивается, скрывая остальную часть страницы. Есть ли какая-нибудь команда HTML или CSS, чтобы отключить этот вид масштабирования на мобильных веб-страницах?
user-scalable=no
игнорируется. Смотрите этоОтветы:
Это должно быть все, что вам нужно
источник
width=device-width
уже нет в первом метатеге?Для тех из вас, кто опаздывает на вечеринку, ответ kgutteridge не работает для меня, и ответ Benny Neugebauer включает target-densitydpi ( функция, которая не рекомендуется ).
Это, однако, работает для меня:
источник
Здесь есть ряд подходов - и хотя позиция такова, что обычно пользователи не должны быть ограничены, когда дело доходит до масштабирования в целях доступности, могут быть случаи, когда это требуется:
Рендеринг страницы по ширине устройства, не масштабировать:
Запретить масштабирование и запретить пользователю возможность масштабирования:
Снятие всего масштабирования, все масштабирование
источник
Ты можешь использовать:
Но, пожалуйста, обратите внимание, что с Android 4.4 свойство target-densitydpi больше не поддерживается . Так что для Android 4.4 и более поздних версий рекомендуется использовать следующее:
источник
Поскольку до сих пор нет решения для первоначальной проблемы, вот мои два чистых CSS-цента.
Мобильные браузеры (большинство из них) требуют, чтобы размер шрифта во входных данных был 16px. Так
решает проблему. Таким образом, вам не нужно отключать масштабирование и потерять специальные возможности вашего сайта.
Если ваш базовый размер шрифта не равен 16px или не равен 16px на мобильных устройствах, вы можете использовать медиазапросы.
источник
font-size: 1rem
для всей страницы, чтобы шрифт хорошо масштабировался, одновременно избегая проблемы "focus-on-zoom".пожалуйста, попробуйте добавить этот метатег и стиль
источник
touch-action
быть установлено наnone
- developer.mozilla.org/en-US/docs/Web/CSS/touch-action#Valuestouch-action: manipulation;
сработало нормально.touch-action: none;
ничего не делалПохоже, что просто добавление метатегов в index.html не препятствует масштабированию страницы. Добавление стиля ниже сделает волшебство.
РЕДАКТИРОВАТЬ: Демо: https://no-mobile-zoom.stackblitz.io
источник
Возможное решение для веб-приложений: хотя масштабирование больше нельзя отключить в iOS Safari, оно будет отключено при открытии сайта с помощью ярлыка главного экрана.
Добавьте эти метатеги, чтобы объявить ваше приложение «способным к веб-приложению»:
Однако только использовать эту функцию , если ваше приложение самообеспечивающийся, как вперед / назад кнопку и URL бар Aswell как варианты обмена отключены. (Вы все еще можете провести пальцем влево и вправо, хотя) Этот подход, однако, позволяет использовать такое приложение, как ux. Полноэкранный браузер запускается только тогда, когда сайт загружается с домашнего экрана.
Я также получил его на работу только после того, как я включил apple-touch-icon-180x180.png в мою корневую папку.В качестве бонуса вы, вероятно, также захотите включить вариант этого:
источник
Вы можете выполнить задачу, просто добавив следующий элемент «meta» в свою «голову»:
Добавление всех атрибутов, таких как «ширина», «начальный масштаб», «максимальная ширина», «максимальный масштаб», может не работать. Поэтому просто добавьте вышеуказанный элемент.
источник
Пожалуйста, добавьте скрипт, чтобы отключить пинч, нажмите, сфокусируйтесь
источник