Я создаю мобильную веб-страницу, которая в основном представляет собой большую форму с несколькими текстовыми вводами.
Однако (по крайней мере, на моем мобильном телефоне Android) каждый раз, когда я нажимаю на какой-то ввод, вся страница масштабируется там, затеняя остальную часть страницы. Есть ли какая-нибудь команда HTML или CSS, чтобы отключить этот вид масштабирования на веб-страницах moble?
Это должно быть все, что вам нужно
<meta
name='viewport'
content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'
/>
Для тех из вас, кто опаздывает на вечеринку, ответ kgutteridge не работает для меня, а ответ Бенни Нойгебауэра включает функцию target-densitydpi (которая устарела).
Это, однако, работает для меня:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Здесь есть несколько подходов, и хотя позиция заключается в том, что обычно пользователи не должны быть ограничены, когда дело доходит до масштабирования для целей доступности, могут быть случаи, когда это необходимо:
Отобразить страницу по ширине устройства, не масштабировать:
<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" />
Вы можете использовать:
<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" />
Поскольку до сих пор нет решения для первоначальной проблемы, здесь мой чистый CSS два цента.
Мобильные браузеры (большинство из них) требуют, чтобы размер шрифта во входных данных был 16px. Так
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
font-size: 16px;
}пожалуйста, попробуйте добавить этот метатег и стиль
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<style>
body{
touch-action: manipulation;
}
</style>
Вы можете выполнить задачу, просто добавив в свой "head" следующий элемент "meta":
<meta name="viewport" content="user-scalable=no">
Добавление всех атрибутов, таких как "ширина", "начальная шкала", "максимальная ширина", "максимальная шкала", может не работать. Поэтому просто добавьте элемент выше.
какой-либо метатег просмотра viewview не будет работать .i в этом случае вы можете добавить этот script
$(document).on('touchmove', false);
например:
</head>
<body>
<script>$(document).on('touchmove', false);</script>
</body>
Возможное решение для веб-приложений: хотя масштабирование больше нельзя отключить в 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' />
Однако только использовать эту функцию, если ваше приложение самообеспечивающееся, как/назад кнопки и адресной строке вперед как хорошо, как варианты обмена отключены. (Вы все еще можете провести пальцем влево и вправо, хотя) Этот подход, однако, позволяет довольно приложение, как UX. Полноэкранный браузер запускается только тогда, когда сайт загружается с домашнего экрана. Я также получил его на работу только после того, как я включил apple-touch-icon-180x180.png в мою корневую папку.
В качестве бонуса вы, вероятно, также захотите включить вариант этого:
<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent'/>