Як вимкнути масштабування вікна перегляду на мобільному Safari?

Я спробував усі ці три безрезультатно:

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

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” />

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

кожне - це різні значення, які я знайшов, рекомендовані пошуком Google або SO пошуком, але жодне із значень " масштабування користувача" = X ", здається, не працює

Я також спробував розставити знаки через крапку з комою, не пощастило. Тоді я спробував ТОЛЬКО мати user-scalableзначення присутнє, все ще не пощастило.

ОНОВЛЕННЯ

Отримав це з сайту Apple, і він працює:

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

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

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

Це працює для мене на мобільному Safari в iOS 4.2.

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

Для людей, які шукають рішення для iOS 10, user-scaleable=noвін відключений у Safari для iOS 10. Причина полягає в тому, що Apple намагається покращити доступність, дозволяючи людям збільшувати масштаб веб-сторінок.

З приміток до випуску :

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

Наскільки я розумію, нам не пощастило.

@mattis вірно, що iOS 10 Safari не дозволить вам відключити прищіпка для збільшення масштабу за допомогою атрибута, що масштабується користувачем. Однак я отримав це для відключення використання prevenDefault у події 'gesturestart'. Я перевірив це лише на Safari в iOS 10.0.2.

document.addEventListener('gesturestart', function (e) {
    e.preventDefault();
});

для iphone safari до iOS 10 "viewport" - це не рішення, мені це не подобається, але я використовував цей код JavaScript, і він допоміг мені

 document.addEventListener('touchmove', function(event) {
    event = event.originalEvent || event;
    if(event.scale > 1) {
      event.preventDefault();
    }
  }, false);

user-scalable=0

Це більше не працює на iOS 10. Apple вилучила цю функцію.

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

Спробуйте додати таке до свого тегу:

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

додатково

<meta name="HandheldFriendly" content="true">

Нарешті, або як атрибут стилю, або у свій файл css додайте наступний текст для веб-браузерів:

html {
    -webkit-text-size-adjust: none
}

У мене це працює в iOS 12 із таким кодом:

if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
  window.document.addEventListener('touchmove', e => {
    if(e.scale !== 1) {
      e.preventDefault();
    }
  }, {passive: false});
}

З першим, якщо оператор я впевнений, що він буде виконуватись лише в iOS-середовищах (якщо він буде виконаний в Android, Behivour прокрутки буде зламаний). Також зверніть увагу на passiveпараметр, встановлений на false.

Це добре працює в IOS 10.3.2

    document.addEventListener('touchmove', function(event) {
        event = event.originalEvent || event;
        if (event.scale !== 1) {
           event.preventDefault();
        }
    }, false);

дякую @arthur та @aleclarson

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

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

та наступне правило для таблиці стилів CSS

html {
	-webkit-text-size-adjust: none;
	touch-action: manipulation;
}

інколи ці інші директиви в contentтезі можуть зіпсувати найкращі здогадки / евристики Apple щодо того, як компонувати вашу сторінку, все, що вам потрібно, щоб вимкнути масштабне збільшення.

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

У Safari 9.0 і новіших версіях ви можете використовувати мета-тег зменшення до розміру в метапотоці перегляду, як показано нижче

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

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

.page{width: 960px;}

до

.page{width:93.75%}

<div id="divPage" class="page">
</div>

Використання touch-actionвластивості CSS - це найелегантніше рішення. Тестовано на iOS 13.5.

Щоб вимкнути жести масштабування та натиснути двічі, щоб збільшити масштаб:

body {
  touch-action: pan-x pan-y;
}

Якщо у вашому додатку також немає потреби в панорамуванні , тобто прокручуванні, скористайтеся цим:

body {
  touch-action: none;
}

Для того, щоб відповідати вимогам доступності WAI WCAG 2.0 AA, ви ніколи не повинні відключати пришвидшене збільшення. (WCAG 2.0: SC 1.4.4 Змінити розмір тексту АА). Більше про це можна прочитати тут: Мобільна доступність: Як WCAG 2.0 та інші Керівні принципи W3C / WAI застосовуються до мобільних пристроїв, збільшення 2.2 / збільшення

Цей повинен працювати над iphone тощо.

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