Как отключить масштабирование / масштабирование веб-страницы на Android?
Я написал небольшое веб-приложение для сбора некоторых данных и их хранения в центральной базе данных. Я хожу вокруг, читаю значения и набираю их на веб-сайте на своем смартфоне Android. Это только для меня, поэтому на этот раз никаких проблем с юзабилити нет.
Теперь я хочу добавить кнопку, чтобы увеличить показание на единицу, и мне нужно иметь возможность нажимать эту кнопку несколько раз. Но если я делаю это слишком быстро, браузер распознает двойную вкладку и масштабирует / увеличивает масштаб страницы.
Я уже добавил заголовок области просмотра и играл с каждой комбинацией значений, которую я мог найти в Интернете. Но страница остается масштабируемой. Как я могу это остановить?
Вот минимальная тестовая страница, которая терпит неудачу для меня:
<!doctype html>
<html>
<head>
<title>Test page</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<style type="text/css">
body
{
font: 16pt sans-serif;
}
</style>
</head>
<body>
This is a test page. It should not be scalable by the user at all. Not with the two-pinger pinch gesture and even less with a double-tap on the text.
</body>
</html>
Добавление начального-масштабирования =1, максимального-масштабирования = 1 и всех видов target-whatitwas-dpi ничего не меняет. Я перезапустил браузер (Dolphin HD и стандартный браузер) и уже очистил кеш. Я на Android 2.2, телефон HTC Desire.
7 ответов
Это известная ошибка в браузерах Android: http://code.google.com/p/android/issues/detail?id=11912
Это работало для меня во всех браузерах Android:
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
Распространенной ошибкой является то, что люди используют 2 мета-тега вида:
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />
Второй мета-тег видового экрана переопределяет первый в некоторых браузерах (например, Chrome для Android). Нет причин иметь два мета-тега области просмотра, так как второй содержится внутри первого.
Смотрите этот ответ для более подробной информации
Я перепробовал их все, но не работал для меня. И я нашел эту действительно работу.
<!-- set viewport to native resolution (android) - disable zoom !-->
<meta
name="viewport"
content="target-densitydpi=device-dpi; width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"
/>
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width">
Мета-тег Viewport решает проблему в большинстве случаев. Но у Android есть странная проблема, когда при изменении ориентации метатег сбрасывается, и вы можете снова масштабировать или увеличивать страницу.
Для исправления этой проблемы в Android-мониторе Ориентировочный обмен и установите мета-тег видового экрана при каждом событии ориентационного изменения.
Вот ссылка с фрагментом кода http://moduscreate.com/orientation-change-zoom-scale-android-bug/
"user-scalable=no" никогда не работал для меня, вместо этого я использую "user-scalable=0", который, кажется, работает удовольствие.
Используйте следующие строки кода:
Проверьте приложение Samsung Galaxy S там, где оно поддерживает. Но когда я открываю ту же ссылку внутри Galaxy Ace, там Turn Off the Zooming не поддерживается.
Пожалуйста, проверьте ваше приложение некоторые другие мобильные и проверьте. Пожалуйста, перейдите по ссылке ниже, вы получите идею:
Попробуйте все это одновременно (извлечено здесь):
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta name="viewport" content="width=device-width" />
Тогда расскажите нам свой опыт