Отключите автоматическое масштабирование / масштабирование поля на тегах ввода на моем мобильном сайте - БЕЗ отключения всех возможностей масштабирования - PullRequest
Новая
       2

Отключите автоматическое масштабирование / масштабирование поля на тегах ввода на моем мобильном сайте - БЕЗ отключения всех возможностей масштабирования

32 голосов
/ 25 февраля 2011

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

Я создаю мобильный сайт нашей компании, и мы хотим отключить мобильные устройства с автоматическим увеличением.используйте для увеличения ввода текста / поиска / электронной почты, когда они сфокусированы.Я строю сайт в HTML5 и видел / тестировал решение <meta name="viewport" content="width=device-width, user-scalable=no" />.С различными свойствами (например, минимальный масштаб = #, максимальный масштаб = # "). Это работает почти на ВСЕХ мобильных устройствах, на которых я тестирую. Только одна проблема. Я хочу, чтобы пользователь могувеличивать / уменьшать на досуге (у нас есть несколько снимков с высоким разрешением, которые было бы неплохо увидеть вблизи)

Как отключить увеличение при нажатии на теги ввода, сохраняя при этом полное ручное пользовательское управление масштабированием?

ps сайт также использует jQuery. Поэтому любые мысли, которые могут помочь, могут помочь.

спасибо Jrak

Ответы [ 6 ]

29 голосов
/ 31 мая 2012

Установка метатега в <head>, как это работает для меня: 

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
12 голосов
/ 23 сентября 2013

Это может не работать точно для вашего стиля, но если вы установите размер шрифта для элементов ввода равным 16px или выше, масштабирование на фокусе остановится.

11 голосов
/ 04 марта 2011

См .: Отключить автоматическое увеличение тега ввода «Текст» - Safari на iPhone

Нет чистого способа, которым я мог бы найти, но вот хак ...

1) Я заметил, что событие наведения мыши происходит до увеличения, но увеличение происходит до событий mousedown или focus.

2) Вы можете динамически изменять тег видового экрана META, используя javascript (см. Включение / отключение масштабирования в iPhone Safari с помощью Javascript? )

Итак, попробуйте это (показано в jquery для компактности): 

$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable);
function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=0" />');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}

Это определенно хак ... могут быть ситуации, когда при наведении / выключении мыши не всегда перехватываются входы / выходы, но это хорошо сработало в моих тестах и ​​является хорошим началом.

6 голосов
/ 06 июня 2014

Мне понадобилось некоторое время, чтобы найти его, но вот лучший код, который я нашел ...... http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/

var $viewportMeta = $('meta[name="viewport"]');
$('input, select, textarea').bind('focus blur', function(event) {
$viewportMeta.attr('content', 'width=device-width,initial-scale=1,maximum-scale=' +        (event.type == 'blur' ? 10 : 1));
});
4 голосов
/ 31 августа 2016

очень простой хак для установки: 

input, textarea {font-size:16px;}
0 голосов
/ 28 мая 2011

Если вы установите преобразование webkit в любое значение, отличное от 1 (или 1.0) затем автоматическое увеличение при выборе входного тега на iPhone отключено. 

document.body.style.webkitTransformOrigin= "0% 0%";
document.body.style.webkitTransform = "scale(1.1)";

Я не тестировал другие мобильные браузеры.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...