следующее работало для меня (Android Galaxy S2):

<meta name="viewport" content="width=device-width, height=device-height,  initial-scale=1.0, user-scalable=no;user-scalable=0;"/>

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

input:focus { font-size: 16px!important}

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

масштаб проблемы вызывают увеличение фокуса ввода

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

большинство мобильных браузеров имеют триггер на фокус ввода (что вы не можете переехать без труда):

if (zoom-level < 1)
   zoom to 1.5
   center focused input relative to screen

*да, это было слишком упрощенным.

миф о метатеге масштаб исправления.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> Все такие настройки видового экрана не будет предотвратите увеличение фокуса ввода, если вы уменьшены. Они также не будут превышать любой другой размер html, тела или элемента, который будет толкать окно на ширину шире, чем экран.

Основной Причиной

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

рассмотрим стандартный размер экрана большинства смартфонов Galaxy линейки Android: 360 x 650. Если ваше тело документа или окна, определяется, чтобы быть больше чем это (скажем, 1024 широкий, чтобы сделать это очевидным), может произойти несколько вещей:

1. браузер может автоматически уменьшать масштаб, чтобы соответствовать ширине экрана.
   1. пользователь может сделать выше.
   2. вы, возможно, сделали выше.
2. браузер восстановит уровень масштабирования при последующих посещениях страницы.
3. теперь вы просматриваете содержимое с ~ 0.35 X зумом.

Начальное Состояние 1x

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

уменьшить, чтобы соответствовать 0.35 x

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

обратите внимание, что браузер теперь находится в состоянии, где текст и ввод (размер для обычного 1X Зума) было бы слишком мало, чтобы читать, таким образом, запускает поведение удобства масштабирования на полях ввода, когда они получают фокус.

увеличить вход-фокус 1.5 x

типичным поведением в приведенном выше случае является увеличение до 1,5 x, чтобы обеспечить видимость ввода. Результат (если вы стилизовали все, чтобы выглядеть лучше при уменьшении масштаба или для большего экрана) менее желателен.

Решение 1

используйте комбинацию правил css media, устройство обнаружения, или что-то лучше всего подходит для вашей ситуации. Установите окно и тело на размер, который заполняет пространство экрана, не превышая его.

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

решение 2

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

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

• при использовании этого метода необходимо выполнить одно из следующих действий:
  • использовать только проценты для ширины.
  • определите ширину ЭМ, и только используйте ЭМ и % для Ширин.
  • см. Решение 1 для использования ширины px.

решение 3

jQuery.мобильный $.mobile.zoom.disable();

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

Да, это возможно

input[type='text'],input[type='number'],textarea {font-size:16px;}

протестировано в браузере Android 4.2 и Android Chrome.

https://stackoverflow.com/a/6394497/4264

единственный случай, когда я обнаружил, что он продолжал масштабирование, был в Chrome с настройками -> доступность -> масштабирование текста выше 100%.

столкнулся с этой проблемой сегодня и, возможно, обновление chromium скоро спустится по трубе, что может ее решить. За хром проблема, на которую указывает @Jo,

нет. 28 jdd...@chromium.org по состоянию на https://codereview.chromium.org/196133011/, автонастройка отключена на сайтах, которые имеют оптимизированный для мобильных устройств видовой экран (например, "ширина=ширина устройства" или фиксированная аннотация видового экрана масштаба страницы).

там может еще авто-прокрутка при фокусировке редактируемых элементов на таких сайтах, чтобы сохранить видимость элемента, но масштабирование будет отключено. Это будет жить в M41 (все еще много недель от попадания бета-канала).

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

на данный момент Chrome является v. 40; v. 41 находится в бета-версии. Будет проверка, чтобы увидеть, если фокус продолжает теряться на Android браузер Chrome.

Я смотрел на эту проблему, как это то, что раздражает меня с моим HTML5 Android app. Я могу предложить половину ответа. То есть, как остановить масштабирование страницы, когда текстовое поле фокусируется.

Требуется JQuery Mobile:

$('#textfield').textinput({preventFocusZoom:true});

делает именно это.

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

    $('#textfield').textinput({preventFocusZoom:false});

или

$('#textfield').textinput('option','preventFocusZoom',false);

должен отключить его, но мне не удалось получить ни один вариант для работы. Не проблема, если вы собираетесь взять пользователя на другую страницу после этого, но ограниченного использования, если, как и я, вы просто собираетесь загружать контент через AJAX.

EDIT: хотя и нацелен на IOS,

$.mobile.zoom.disable();

также прекращает сигналить. В более подходящем общем виде. Но, к сожалению

$.mobile.zoom.enable();

не удается восстановить функциональность просто как и прежний код.

font-size: 18px;

это исправлено для моего Nexus 7 (2011) под управлением Android 4.3.

эта проблема существует только для меня на Nexus 7, все следующие устройства выглядят счастливыми с размером шрифта: 16px:

• HTC Desire Android 2.3.7
• Nexus 4 Android 4.3

надеюсь, это кому-то поможет!

это работает, где #inputbox - идентификатор входного элемента формы.

Я использую это, чтобы остановить окно поиска от автоматического масштабирования в IOS это мод более раннего сообщения выше, так как событие mouseover будет работать только в первый раз, но не сможет вызвать последующие разы. Наслаждайтесь этим, это был настоящий пулер для волос...

$("#inputbox").live('touchstart', function(e){
    $('head meta[name=viewport]').remove();
    $('head').prepend('<meta name="viewport" content="user-scalable=0" />');
    }
);

$("#inputbox").mousedown(zoomEnable);

function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}

просто Примечание стороны:

решение с meta name="viewport" отлично работает. Тем не менее, как родной, так и Chrome браузеры в Android имеют параметр доступности с именем "переопределить запрос веб-сайта для управления масштабированием". если этот параметр установлен, ничто в HTML, CSS или JavaScript не может отключить масштабирование.

вам нужно 2 вещи:

использовать метатег, как это в вашей голове, чтобы избежать пользователя от масштабирования:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

а затем в css поставить что-то вроде следующего, чтобы избежать браузера от масштабирования:

* { font-size:16px; }

готово! Я думаю, что браузер изменяет размер вашего окна просмотра на основе самого маленького шрифта или что-то в этом роде. Может быть, кто-то мог бы объяснить это лучше, но это сработало :)

Работа Моделью

у нас это работает на Android. Вот ключ:размер шрифта на input должен быть правильный размер. Если ваша страница имеет ширину 320px, вам нужен размер шрифта 16px. Если Вы размер 640px, то вам нужен размер шрифта 32px.

кроме того, вам потребуется следующее

шириной 320 версия

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

шириной 640 версия

<meta name="viewport" content="width=640, initial-scale=.5, maximum-scale=.5, minimum-scale=.5" />

Примечание.: ЭТО НЕ СОДЕРЖИТ АТРИБУТ МАСШТАБИРУЕМОСТИ ПОЛЬЗОВАТЕЛЯ. ЭТО ЕГО СЛОМАЕТ.

для тех, кто пытается остановить масштабирование при попытке сосредоточиться на скрытом поле ввода, вы можете сделать скрытый ввод таким же большим (или по крайней мере таким же широким), как область экрана(или видимая область) - это остановило его масштабирование.

например

HIDDENinput.style.width = window.innerWidth;

HIDDENinput.style.height = window.innerHeight; (необязательный)

Это может быть хороший ответ:

input, textarea {
  max-width:100%;
}

не используйте <meta name=viewport content='user-scalable=no'>

Я не уверен, что вы можете отключить масштабирование, но вы можете установить такое ограничение

 <meta id="viewport" name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">

максимум-масштаб=0.5 и минимальный масштаб=0.5 следует сделать трюк. Это сработало для меня.

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

 input[type='text'],input[type='number'],textarea {font-size:16px;}
 body{ -webkit-text-size-adjust:none;}

вы также можете установить ниже мета-тег, но он полностью предотвращает масштабирование пользователя.

<meta name="viewport" content="width=device-width,  initial-scale=1.0, user-scalable=0;"/>

Если вы хотите масштабирование пользователя, но только отключить масштабирование ввода попробуйте это

$("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" />');
}

кроме того, попробуйте это

возможно, вы могли бы избежать масштабирования, сбросив масштаб масштабирования до 1.0? На моем Android (HTC Wildfire S) Я могу сбросить масштаб до 1.0 следующим образом:

$('meta[name=viewport]').attr('content',
         'initial-scale=1.0, maximum-scale=0.05');

но это перемещает видовой экран в 0, 0 (верхний левый угол страницы). Так Что Я $().scrollLeft(...) и .scrollTop(...) обратно в form еще раз.

(initial-scale=1.0, maximum-scale=0.05 это мое начальное значение viewport мета.)

(причина, по которой я это делаю, заключается не в том, чтобы предотвратить масштабирование Android, а скорее сбросить масштаб до известного масштаба, из-за других ошибок Android, которые в противном случае коррумпированы screen.width и другие связанные значения.)

попробуйте этот, он работает на моем устройстве:

<meta content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" name="viewport" /> 

однако, когда я дважды нажимаю на поле ввода, Клавиатура скользит вверх и делает страницу меньше по высоте.

случайно я обнаружил, что это:

 input {
     line-height:40px;
 }   

предотвратит увеличение на входе на моем Galaxy Nexus с Chrome для Android версии 18 хотя это может быть специфично для моего случая:

<meta name='viewport' data='width=800'>

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

у меня была та же проблема (только в браузере Android chrome). Я решил проблему вот так.

1. обнаружен агент пользователя, и привязать onfocus и onBlur события текстовых полей, чтобы изменить мета-содержимое видового экрана следующим образом

   if ((navigator.userAgent.match(/Android/i)) && (navigator.userAgent.toLowerCase().indexOf('chrome') > -1)) {
   isAndroidChrome = true;    
   }
   var viewportmeta = document.querySelector('meta[name="viewport"]');
   

2. onFocus текстового поля, я установил следующий видовой экран мета-контента viewportmeta.content = 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1';

3. onBlur текстового поля, Я сбрасываю мета-контент видового экрана в viewportmeta.content = 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.4'; вы можете установить максимальный масштаб, если хотите, или если вы хотите, чтобы он был масштабируемым пользователем, не устанавливайте максимальный масштаб

при изменении триггера onFocus событие ввода, если maximum-scale и 1, он не приближается. Это сработало для меня как заклинание. Надеюсь, что это работает для вас тоже.

как сказал @soshmo,user-scalable не является атрибутом, который нравится WebKit, и поэтому его включение заставляет WebKit отбрасывать весь тег viewport. Я также обнаружил, что это имеет место с настройкой maximum-scale ни к чему, кроме 1, и это не остановило масштабирование.

сброс viewport на каждые focus и blur событие сработало для меня:

var htmlWidth = parseInt($('html').outerWidth());
var screenDPI = parseInt(window.devicePixelRatio);
var screenWidth = parseInt(screen.width);
var screenHeight = parseInt(screen.height);    
var scaleVal = (((screenWidth * screenDPI) / htmlWidth)/screenDPI);
$('input[type="text"], input[type="password"], input[type="email"]').each(function() {

    //unchained for clarity

    $(this).focus(function() { 
        $('meta[name="viewport"]').attr('content', "initial-scale=' + scaleVal + ', maximum-scale=1, minimum-scale=' + (scaleVal) + ', width=device-width, height=device-height");
        // Do something to manage scrolling the view (resetting the viewport also resets the scroll)
        $('html, body').scrollTop(($(this).offset().top - (screenHeight/3)));
    });

    $(this).blur(function() { 
        $('meta[name="viewport"]').attr('content', "initial-scale=' + scaleVal + ', maximum-scale=1, minimum-scale=' + (scaleVal) + ', width=device-width, height=device-height");
    });
});

если вы обнаружите, что установка/сброс viewport стоит проверить, что WebKit принимает атрибуты контента, которые ты употребляешь. Мне потребовалось некоторое время, чтобы понять, что использование таких вещей, как user-scalable причинил viewport быть отброшенным, поэтому, хотя JavaScript работал, изменения не были затронуты.

установка свойства viewport user-scalable на touchstart сделала это для меня, не нужно удалять, а затем повторно добавлять, просто измените его на touchstart, а затем снова включите размытие. Означает, что пользователь не может масштабировать, пока сосредоточен на поле, но небольшая цена, которую я думаю.

var zoomEnable;

zoomEnable = function() {
  $("head meta[name=viewport]").prop("content", "width=device-width, initial-scale=1.0, user-scalable=yes");
};

$("input[type='text']").on("touchstart", function(e) {
  $("head meta[name=viewport]").prop("content", "width=device-width, initial-scale=1.0, user-scalable=no");
});

$("input[type='text']").blur(zoomEnable);

для Nexus 7 я получал эту проблему, когда мой медиа-запрос был -

@media screen and (max-device-width: 600px) and (orientation : portrait)

поэтому я использовал ниже медиа-запрос, чтобы решить эту проблему -

@media screen and (max-device-width: 600px) and (max-aspect-ratio: 13/9)

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

Meta:

<meta id="meta1" name="viewport" content="width=device-width,initial-scale=1,minimal-ui"/>

CSS:

html{
    position:absolute;
    overflow:-moz-scrollbars-vertical;
    overflow-y:scroll;
    overflow-x:hidden;
    margin:0;padding:0;border:0;
    width:100%;
    height:100%;
    }
body{
    position: relative;
    width: 100%;
    height: 100%;
    min-height:100%;
    margin: 0;
    padding: 0;
    border: 0;
}

установка HTML в position:absolute и overflow-x:hidden сделал трюк для меня.

работал на galaxy 4:
Добавьте код в файл index HTML Заголовок :

<meta name="viewport" content="width=device-width, height=device-height,  initial-scale=1.0, user-scalable=no;user-scalable=0;"/>

Я отправляю ответ, потому что я сталкивался с подобной проблемой и я решил его.

мое состояние ниже.

настройка видового экрана в html head-это

<meta name="viewport" content="width=640">

агенты-это браузер Android по умолчанию.
Это не Chrome, Firefox и Safari.
Версии Android под 4.2.x.

детали наших ситуаций не совпадают, но я думаю, что у них есть по существу равная проблема.

Я решил его добавить "target-densitydpi=device-dpi" в тег meta[name=viewport].

<meta name="viewport" content="width=640, target-densitydpi=device-dpi">

попробуйте, пожалуйста.

но я должен сказать, что" target-densitydpi=device-dpi " будет иметь побочный эффект.

тяжелый случай здесь.

1. старый браузер android читает "target-densitydpi=device-dpi".
2. он переходит на другую страницу, которая не имеет свойства target-densitydpi.
3. браузер начинает отображать страницу как "target-densitydpi=device-dpi".
4. так он отображает следующую страницу в неправильном масштабе.

решение этого случая-переписать свойство target-densitydpi на " medium-dpi "из" device-dpi " с помощью javascript перед переходом на следующую страницу.

пример использования jQuery.

<a href="go-to-the-other" class="resetDensityDpi">Other page</a>
<script>
$(function(){
    $('.resetDensityDpi').click(function(){
        var $meta = $('meta[name="viewport"]');
        $meta.attr('content', $meta.attr('content').replace(/target-densitydpi=device-dpi/, 'target-densitydpi=medium-dpi'));
        return true;
    });
});
</script>

и... этот код вызывает новую проблему.
Некоторые браузеры отображают результаты процесса javascript, используя данные кэша, когда они возвращаются на предыдущую страницу с помощью кнопки "Назад". Поэтому они отображают предыдущую страницу как "target-densitydpi=medium-dpi", а не как "target-densitydpi=device-dpi".

решение этого как раз противоположно выше.

<script>
$(function(){
    var rollbackDensityDpi = function() {
        // disable back-forword-cache (bfcache)
        window.onunload = function(){};

        var $meta = $('meta[name="viewport"]');
        if ($meta.attr('content').match(/target-densitydpi=medium-dpi/)) {
            $meta.attr('content', $meta.attr('content').replace(/target-densitydpi=medium-dpi/, 'target-densitydpi=device-dpi'));
        }
    };

    if (window.addEventListener) {
        window.addEventListener("load", rollbackDensityDpi, false);
    } else if (window.attachEvent) {
        window.attachEvent("onload", rollbackDensityDpi);
    } else {
        window.onload = rollbackDensityDpi;
    }
});
</script>

спасибо.

держите содержимое более узким, чем окно.

вы должны будете создать свою страницу с самого начала с учетом этого, но это полностью эффективно.

ключ должен использовать @media css at-rule чтобы разрешить только компонентам иметь ширину, которую вы знаете, экран достаточно большой, чтобы содержать.

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

@media (min-width: 960px){
.content{
  width : 960px;
}
}

или, может быть, у вас есть изображение шириной 500 пикселей, вам, возможно, придется скрыть его на меньших экранах:

@media (max-width: 500px){
.image{
  display : none; 
}
}

обычно вы не хотите отключать специальные возможности.

но вы можете обойти проблему масштабирования, просто добавив фиксированный div и разместив свою веб-страницу внутри него.

#app {
  position: fixed;
  top: 0em;
  bottom: 0em;
  left: 0em;
  right: 0em;
  overflow: scroll;
 }

<body>
<div class="app">
  <!-- the rest of your web page  -->
  <input type="text">
</div>
</body>

<body>
     <div class="app">
     </div>
</body>

добавьте этот мета-тег в свой html-файл, и это решит проблему.

<meta name="viewport" content="width=device-width, user-scalable=no" />

добавление этой строки решило проблему для меня в HTC desire 816 и SAMSUNG GALAXY S5.

Это может быть решением такого рода проблемы

<meta name="viewport" content="user-scale=no"/>
<meta name="viewport" content="width=device-width"/>
<meta name="viewport" content="width=device-width, maximum-scale=0.9"/>