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


android html scaling viewport
person ygoe    schedule 14.10.2011    source источник
comment
Вы нашли решение? У меня такая же проблема на устройстве Samsung и HTC? Не работают метатеги..   -  person Renato H.    schedule 03.11.2011
comment
Этот комментарий задает очень похожий вопрос, и ответ, по-видимому, заключался в том, что вам придется с этим жить: stackoverflow.com/questions/7073396/   -  person hotshot309    schedule 03.07.2012

Ответы (7)


arrow_upward
12
arrow_downward

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

person Hades    schedule 01.01.2012
comment
Это звучит очень разумно. Принято, учитывая небольшое количество других полезных ответов. - person ygoe; 02.01.2012
comment
user-scalable=no никогда не работал у меня, вместо этого я использую user-scalable=0, который, кажется, работает. - person frddsgn; 21.08.2012
comment
@dvdfrddsgn Это может сработать, но я не думаю, что это допустимо на основе user-scalable API - person JohnnyQ; 24.07.2019

arrow_upward
47
arrow_downward

Это работало для меня во всех браузерах 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" />

Второй метатег viewport переопределяет первый в некоторых браузерах (например — chrome для android). Нет причин иметь два метатега области просмотра, так как второй содержится внутри первого.

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

person Rubinsh    schedule 07.02.2013

arrow_upward
3
arrow_downward

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

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

person babyromeo    schedule 06.12.2013
comment
У меня была такая же проблема, и это единственное рабочее решение для: браузера Android, Chrome и iPhone. - person Ronny Sherer; 27.03.2014

arrow_upward
1
arrow_downward 

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

person Ankit Garg    schedule 14.02.2013

arrow_upward
-1
arrow_downward

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

person frddsgn    schedule 21.08.2012
comment
У меня тоже не работает. Я все еще могу увеличить масштаб с этой настройкой. Похоже, что Android (2.2) просто не может этого сделать. - person ygoe; 24.08.2012

arrow_upward
-2
arrow_downward

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

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

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

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

person mayur rahatekar    schedule 09.03.2012

arrow_upward
-4
arrow_downward

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

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

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

person A.Quiroga    schedule 14.10.2011
comment
Извините за поздний ответ, в прошлом уведомления Stackoverflow работали лучше. Предложенный вами код вообще ничего не меняет. Я все еще могу увеличить страницу. - person ygoe; 20.11.2011