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

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

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

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

p.s на сайте также используется jQuery. Поэтому любые мысли, использующие это, могут помочь.

спасибо Jrak

Ответ 1

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

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

Ответ 2

Смотрите: Отключить автоматическое масштабирование ввода "Text" tag - Safari на iPhone

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

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

2) Вы можете динамически изменять тег viewport 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" />');
}

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

Ответ 3

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

Ответ 4

Мне потребовалось некоторое время, чтобы найти его, но вот лучший код, который я нашел...... 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));
});

Ответ 5

очень просто взломать:

input, textarea {font-size:16px;}

Ответ 6

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

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

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