Ось дилема, у мене є веб-сторінка (лише для пристроїв Android), і на цій сторінці у мене є поле введення (конкретно текстове поле), і коли він фокусується, браузер збільшує масштаб. Я не хочу, щоб він збільшувався - звучить легко, правда?

Ось де це весело: я повинен мати можливість масштабування загалом, тому не кажіть

<meta name='viewport' content='user-scalable=0'>

Це для мене не спрацює.

Крім того, поле введення не отримує події кліків. Це з'являється, коли натискається інша кнопка a, програмно фокусується.

Ось те, що я спробував, і вони поки не вдалися:

jQuery('head meta[name=viewport]').remove();
jQuery('head').prepend('<meta name="viewport" content="width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=no" />');
jQuery("#locationLock input").focus();
jQuery('head meta[name=viewport]').remove();
jQuery('head').prepend('<meta name="viewport" content="width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=yes" />');

Це також не вдалося:

<input type='text' onfocus="return false">

І це:

jQuery("#locationLock input").focus(function(e){e.preventDefault();});

Будь-які ідеї?

У мене працювало наступне (Android Galaxy S2):

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

Неможливо!

У мене є погані новини для всіх вас. Зараз минуло 6 місяців, і ніхто правильно не відповів на питання.

Також я закінчив роботу над цим проектом та роботодавцем.

Я боюся це сказати, але саме те, про що я просив, неможливо. Вибачте народи. Але я збираюся залишити це питання живим, щоб люди бачили інші варіанти.

Проблеми із масштабуванням спричиняють збільшення фокусу на вході

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

Більшість мобільних браузерів мають тригер на фокусі введення (що ви не можете без проблем переїхати):

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, корпусу чи елемента, який змістив би вікно на ширину ширшу, ніж екран.

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

Використання вікна або розміру корпусу більше розмірів екрана пристрою.

Розглянемо стандартний розмір екрану для більшості лінійки смартфонів Android: 360 x 650. Якщо корпус вашого документа або вікно визначено більшим за цей (скажімо, шириною 1024, щоб це стало очевидним), деякі речі можуть трапиться:

1. Браузер може автоматично зменшувати масштаб відповідно до ширини екрана.
   2. Користувач може зробити вищезазначене.
   3. Можливо, ви зробили вищезазначене.
2. Браузер відновить рівень масштабування при наступних відвідуваннях сторінки.
3. Зараз ви переглядаєте вміст із масштабуванням ~ 0,35x.

Початковий стан 1x

Після завантаження сторінка не вміщується. Деякі браузери можуть зменшувати масштаб відповідно до вікна, але користувач, безсумнівно, буде. Крім того, якщо один раз зменшити цю сторінку, браузер збереже рівень масштабування.

Зменште розмір до розміру 0,35x

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

Зверніть увагу, що браузер зараз перебуває у стані, коли текст та введення (розмір для звичайного 1-кратного масштабування) були б занадто малі для читання, що спричиняє поведінку зручності масштабування полів введення, коли вони фокусуються.

Збільшити вхідний фокус 1,5x

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

Рішення 1

Використовуйте комбінацію правил css-носіїв, виявлення пристроїв або будь-чого, що найкраще відповідає вашій ситуації. Встановіть для вікна та корпусу розмір, який заповнює екран, не перевищуючи його.

• Ось чому так багато людей досягають успіху, примушуючи розмір введеного тексту до 16 пікселів;
  • як тільки ви це зробите, стає зрозуміло, що ви ШАГ зменшили.
  • він також має додаткову перевагу, обманюючи браузер, дозволяючи злегка зменшеним вікнам не викликати фокусування.

Рішення 2

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

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

• Використовуючи цей метод, ви повинні зробити одне з наступного:
  • Використовуйте лише відсотки для ширини.
  • Визначте ширину em та використовуйте em та% лише для ширини.
  • див. рішення 1 щодо використання ширини пікселів.

Рішення 3

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

Просто переконайтеся, що ви починаєте розробляти його з самого початку, а не з середини.

Я не впевнений, що це найкращий спосіб, але це працює для мене на Android та iphone.

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

За допомогою медіа-запитів можна націлювати лише мобільні пристрої.

Так, це можливо

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

Тестується в браузері Android 4.2 та Android Chrome.

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

Єдиний випадок, коли я виявив, що воно постійно масштабується, був у Chrome із налаштуваннями -> доступність -> масштабування тексту вище 100%.

Натрапив на цю проблему сьогодні, і незабаром може з’явитися оновлення хрому, яке може її вирішити. За проблему хрому, на яку вказує @Jo,

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

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

Ми не плануємо іншим чином запобігати автоматичному масштабуванню для старих веб-сайтів.

На цей час Chrome є версією 40; v.41 - у бета-версії. Буде перевіряти, чи не втрачається фокус на браузері Android Chrome.

Я розглядав цю проблему, оскільки це дратує мене за допомогою мого додатка для Android HTML5. Я можу запропонувати половину відповіді. Це означає, як зупинити масштабування сторінки, коли фокусується текстове поле.

Потрібен 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, це мод попередньої публікації вище, оскільки подія наведення курсора буде працювати лише вперше, але не спрацьовує в подальшому. Насолоджуйтесь цим, це був справжній знімач волосся ...

$("#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; }

Готово! Я думаю, що браузер змінює розмір області перегляду на основі найменшого шрифту або чогось подібного. Можливо, хтось може пояснити це краще, але це спрацювало :)

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

<html><head><meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=0' ></head><body>html code</body></html> 

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

У нас це працює на Android. Ось ключ: розмір шрифту на введенні повинен бути належного розміру. Якщо ваша сторінка має ширину 320 пікселів, вам потрібен розмір шрифту 16 пікселів. Якщо ваш розмір - 640 пікселів, тоді вам потрібен шрифт розміром 32 пікселі.

На додаток вам потрібно наступне

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 повинні зробити це. У мене це спрацювало.

Якщо встановити розмір шрифту для введення 16 пікселів, масштабування зупиняється. Мобільні браузери припускають, що розмір менше 16 пікселів означає, що користувачам потрібно буде збільшити масштаб, то чому б я не зробив це сам.

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

також спробуйте це

Зазвичай ви не хочете вимикати функції доступності.

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

Можливо, ви могли б уникнути масштабування, скинувши масштаб масштабування до 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. Виявлено userAgent та прив’язано події 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 відкинути весь тег області перегляду. Я також виявив, що це має місце при встановленні 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 на сенсорній панелі зробив це для мене, не потрібно видаляти, а потім повторно додавати, просто змінюйте її на сенсорній панелі, а потім знову вмикайте при розмитті. Означає, що користувач не може масштабувати, орієнтуючись на поле, але малу ціну, яку я маю заплатити.

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 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:
Додайте код до файлу індексу заголовка HTML:

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

Я публікую відповідь, оскільки зіткнувся з подібною проблемою і вирішив її.

Мій стан нижче.

Налаштування області перегляду в голові html:

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

Агенти - це браузер Android за замовчуванням.
Це не Chrome, Firefox та Safari.
Версії Android мають версію 4.2.x.

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

Я вирішив, щоб додати "target-densitydpi = device-dpi" у мета-тег [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, щоб дозволити компонентам мати лише таку ширину, яку ви знаєте, що екран досить великий.

Наприклад, якщо у вас встановлена ​​ширина вмісту, щоб текст не надто розповсюджувався на більшому моніторі, переконайтеся, що ширина стосується лише великих екранів:

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

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

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

Спробуйте використовувати це, це буде відповідати розміру пристрою та уникати збільшення / зменшення масштабу

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