Як я можу “відключити” масштабування на мобільній веб-сторінці?

316

Я створюю мобільну веб-сторінку, яка в основному є великою формою з декількома текстовими вводами.

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

html css mobile

— Мартін Фіксман
джерело

3

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

— tomasz86

8

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

— Лука

11

Ви цього не робите - Якщо користувачі хочуть збільшувати масштаб, тоді дозвольте їм це зробити. Крім того: у Chrome є можливість просто проігнорувати ваш запит.

— Мартін

2

Для користувачів Firefox Android існує надбудова Завжди збільшувати для Firefox . Настійно рекомендується.

— Колін Д Беннетт

2

З прошивкою 10 , user-scalable=noігнорується. Дивіться це

— Раптор

443

Це має бути все необхідне

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

— kgutteridge
джерело

23

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

— matt lohkamp

3

Зараз хтось із Posterous зробив саме це, маючи шрифт у 12 пікселів, тому він не читабельний, і я не можу знайти шлях.

— Еміль Іванов

41

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

— Джек Марчетті

6

Що робить другий метатег? Хіба width=device-widthвже не перший метатег?

— Лука

1

це не працює на iOS 7. Дивіться відповідь

— lukad03

159

Для тих, хто запізнився на вечірку, відповідь kgutteridge для мене не працює, і відповідь Бенні Нойгебауера включає цільову щільністьDpi ( функція, яка застаріла ).

Однак це для мене працює:

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

— Люк Келлер
джерело

7

Це правильна відповідь зараз. Інші відповіді більше не працюють (принаймні, для iOS 7).

— KyleFarris

7

Хтось спробував це на iOS 10.x Я не думаю, що це працює?

— JMac

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

— Кокоріко

1

Досі не працює над Safari / iOS 11 через проблему SFB в Apple.

— 15ee8f99-57ff-4f92-890c-b56153

52

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

Візуалізуйте сторінку на ширині пристрою, не масштабуйте:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Запобігайте масштабуванню та не дозволяйте користувачеві збільшувати масштаб:

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

Видалення масштабування та масштабування

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

— SW4
джерело

"Зазвичай користувачів не слід обмежувати", але при розробці веб-додатків для мобільних пристроїв вам часто доводиться стикатися з "зомбі-фокусом на вхід". Я вважаю корисним відключити масштабування в такому випадку.

— Le 'nton

@ Le'nton відключення масштабування на всій сторінці - не гарний спосіб вирішити масштаб на фокусі введення. Принаймні, на iOS збільшення фокусного введення можна відключити, збільшивши розмір шрифту.

— pfg

39

Ви можете використовувати:

<head>
  <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
  ...
</head>

Але зауважте, що з Android 4.4 властивість target-densitydpi більше не підтримується . Отже, для Android 4.4 та новіших версій пропонується наступне:

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

— Бенні Нойгебауер
джерело

35

Оскільки досі не існує рішення для початкового випуску, ось мій чистий CSS два центи.

Мобільні браузери (більшість із них) вимагають, щоб розмір шрифту вводився 16 пікселів. Тому

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
  font-size: 16px;
}

Розгорніть фрагмент

вирішує питання. Тому вам не потрібно відключати функції масштабування та втрату доступності вашого сайту.

Якщо ваш базовий розмір шрифту на мобільних пристроях не становить 16 пікселів або не становить 16 пікселів, ви можете використовувати медіа-запити.

@media screen and (max-width: 767px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"] {
    font-size: 16px;
  }
}

Розгорніть фрагмент

— Азамат Расулов
джерело

2

Чому за це рішення існує так мало голосів? Це, безумовно, найкращий спосіб уникнути масштабування кліків форми.

— KlausCPH

1

Так; це також вирішило мою проблему! Я не хотів повністю відключати масштабування, і це було саме те, що мені потрібно.

— бренда

1

Ви також можете встановити font-size: 1remдля всієї сторінки, щоб шрифт добре масштабував, одночасно уникаючи проблеми "фокусування на масштабуванні".

— itachi

12

будь ласка, спробуйте додати цей метатег та стиль

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


<style>
body{
        touch-action: manipulation;
    }
</style>

— Сарат Ак
джерело

1

не touch-actionслід встановлювати none- developer.mozilla.org/en-US/docs/Web/CSS/touch-action#Values

— rahulroy9202

@ rahulroy9202 для мене touch-action: manipulation;добре працював. touch-action: none;нічого не робив

— Umair

7

Схоже, що просто додавання метатегів до index.html не перешкоджає збільшенню сторінки. Додавання стилю нижче зробить магію.

:root {
  touch-action: pan-x pan-y;
  height: 100% 
}

EDIT: Демо: https://no-mobile-zoom.stackblitz.io

— Апі
джерело

2

Це слід прийняти виправленням, також працюючи над мобільним сафарі ios13 атм

— Magico

Це працює, як очікувалося від мобільного, дякую! перевірити тут proyecto26.com/animatable-component

— jdnichollsc

6

Можливе рішення для веб-додатків: Хоча масштабування вже не можна відключити в iOS Safari, його буде відключено при відкритті сайту з ярлика домашнього екрана.

Додайте ці метатеги, щоб оголосити вашу програму як "Веб-програму, здатну":

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta name='apple-mobile-web-app-capable' content='yes' />

Однак користуйтеся цією функцією лише в тому випадку, коли ваш додаток самозберігається, оскільки кнопки вперед / назад та рядок URL також відключені, оскільки параметри спільного доступу відключені. (Ви все одно можете пальцем ліворуч і праворуч) Однак цей підхід дозволяє використовувати програму, як ux. Повноекранний браузер запускається лише тоді, коли сайт завантажується з домашнього екрану. ~~Я також працював лише після того, як я включив apple-touch-icon-180x180.png у свою кореневу папку.~~

Як бонус, ймовірно, ви також хочете включити варіант цього відмови:

<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent'/>

— денквер
джерело

1

Ви можете виконати завдання, просто додавши в свою голову наступний елемент 'meta':

<meta name="viewport" content="user-scalable=no">

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

— Касумі Гунасекара
джерело

-1

<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>

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

— Прем
джерело