Как отключить масштабирование / масштабирование веб-страницы на Android? - PullRequest
25 голосов
/ 15 октября 2011

Я написал небольшое веб-приложение для сбора некоторых данных и их хранения в центральной базе данных.Я хожу вокруг, читаю значения и набираю их на веб-сайте на своем смартфоне 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 и всех видов цели, независимо от того, что было-dpi ничего не меняет.Я перезапустил браузер (Dolphin HD и стандартный браузер) и уже очистил кеш.Я на Android 2.2, телефон HTC Desire.

Ответы [ 7 ]

46 голосов
/ 07 февраля 2013

Это сработало для меня во всех браузерах 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).Нет никаких причин иметь два мета-тега области просмотра, поскольку второй содержится в первом.

См. Этот ответ для получения более подробной информации

11 голосов
/ 01 января 2012

Это известная ошибка в браузерах Android: http://code.google.com/p/android/issues/detail?id=11912

4 голосов
/ 06 декабря 2013

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

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

от http://andidittrich.de/index.php/2012/02/disable-zoom-function-of-android-browser-force-native-resolution/

1 голос
/ 14 февраля 2013
<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/

0 голосов
/ 21 августа 2012

«user-scalable = no» никогда не работал для меня, вместо этого я использую «user-scalable = 0», который, кажется, работает удовольствие.

0 голосов
/ 09 марта 2012

Используйте следующие строки кода:

Проверьте приложение Samsung Galaxy S там, где оно поддерживается.Но когда я открываю ту же ссылку внутри Galaxy Ace, там Turn Off the Zooming не поддерживается.

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

http://garrows.com/?p=337

0 голосов
/ 15 октября 2011

Попробуйте все это одновременно (извлечено из здесь ):

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

Тогда расскажите нам свой опыт

...