Ответ 1

Невозможно!

У меня есть плохие новости для всех вас. Теперь прошло 6 месяцев, и никто не ответил правильно.

Также я закончил работу над этим проектом и работодателем.

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

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 4

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

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

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

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, body или element, которые увеличивали бы ширину окна до ширины экрана.

Основная причина

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

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

• Браузер может автоматически масштабироваться, чтобы соответствовать ширине экрана.
  2. Пользователь может сделать это.
  3. Возможно, вы сделали это.

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

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

Уменьшить до 0,35x

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

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

Увеличить фокус ввода 1.5x

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

Решение 1

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

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

Решение 2

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

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

• При использовании этого метода вы должны выполнить одно из следующих действий:
  • Используйте только проценты для ширины.
  • Определите ширину em и используйте только em и% для ширины.
  • см. решение 1 для использования ширины px.

Решение 3

jQuery.mobile $.mobile.zoom.disable();

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

Ответ 5

Да, возможно

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

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

fooobar.com/questions/83812/...

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

Ответ 6

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

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

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

У нас нет планов по предотвращению автозапуска для устаревших сайтов на рабочем столе.

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

Ответ 7

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

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

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

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

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

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

или

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

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

РЕДАКТИРОВАТЬ: Хотя он нацелен на IOS,

$.mobile.zoom.disable();

Также останавливает масштабирование. Более подходящим образом. Но, к сожалению,

$.mobile.zoom.enable();

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

Ответ 8

font-size: 18px;

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

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

• HTC Desire Android 2.3.7
• Nexus 4 Android 4.3

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

Ответ 9

Это работает, где #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" />');
}

Ответ 10

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

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

Ответ 11

Вам нужно 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; }

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

Ответ 12

Если вы установите размер шрифта ввода 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" />');
}

попробуйте это

Ответ 13

Рабочая модель

У нас это работает на Android. Вот ключ: размер шрифта на входе должен быть нужного размера. Если у вас страница шириной 320 пикселей, вам потребуется размер шрифта 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" />

ПРИМЕЧАНИЕ. ЭТО НЕ СОДЕРЖИТ ПРИЗНАЧЕНИЕ ПОЛЬЗОВАТЕЛЯ. ЭТО БУДЕТ ОБРАТИТЬСЯ.

Ответ 14

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

например.

HIDDENinput.style.width = window.innerWidth;

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

Ответ 15

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

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

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

Ответ 16

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

 <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 должны делать трюк. Это сработало для меня.

Ответ 17

Возможно, вы могли бы избежать масштабирования, сбросив масштаб масштаба до 1,0? На моем Android (HTC Wildfire S) я могу reset масштабировать до 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 meta.)

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

Ответ 18

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

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

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

Ответ 19

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

 input {
     line-height:40px;
 }   

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

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

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

Ответ 20

У меня была такая же проблема (только в браузере Chrome Chrome). Я решил проблему вроде этого.

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

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

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

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

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

Ответ 21

Как сказал @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 работал, изменения не были затронуты.

Ответ 22

Настройка свойства масштабируемого пользовательского экрана в 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);

Ответ 23

Для 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)

Ответ 24

Бит опоздал на вечеринку, но вчера я провел целую ночь, пока я дошел до этого поста, и понял, что это особенность/ошибка от 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 сделала трюк для меня.

Ответ 25

Работал для галактики 4:
Добавьте код в индексный файл заголовка HTML:

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

Ответ 26

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

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

Настройка просмотра в 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" будет иметь побочный эффект.

Плохой случай здесь.

• Андроид OLD-браузер читает "target-densitydpi = device-dpi" .
• Он переходит на другую страницу, у которой нет свойства target-densitydpi.
• Браузер начинает отображать страницу как "target-densitydpi = device-dpi" .
• Таким образом, он отображает следующую страницу в неправильном масштабном коэффициенте.

Решением этого случая является переписать свойство 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" NOT как "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>

Спасибо.

Ответ 27

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

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

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

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

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

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

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

Ответ 28

Как правило, вы не хотите отключать функции доступности.

Но вы можете обойти проблему масштабирования, просто добавив фиксированный 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>

Ответ 29

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

Ответ 30

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

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

добавив, что эта проблема решена для меня в HTC 816 и SAMSUNG GALAXY S5.