Jak wyłączyć powiększanie rzutni w Mobile Safari?

Wypróbowałem wszystkie trzy bezskutecznie:

<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;” />

każda z nich jest inną wartością, którą znalazłem zalecaną przy wyszukiwaniu google lub SO, ale wydaje się , że żadna z wartości „ skalowalnych przez użytkownika = X ” nie działa

Próbowałem też przecinka wartości zamiast średnika, bez powodzenia. Potem próbowałem TYLKO mając user-scalableobecną wartość, wciąż bez powodzenia.

AKTUALIZACJA

Mam to ze strony Apple i działa:

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

okazuje się, że problemem były niestandardowe cytaty, ponieważ skopiowałem metatag ze strony internetowej, która ich używała, ups

Twój kod wyświetla podwójne cudzysłowy atrybutów jako fantazyjne podwójne cudzysłowy. Jeśli fantazyjne cytaty są obecne w twoim kodzie źródłowym, zgaduję, że to jest problem.

Działa to dla mnie na Mobile Safari w iOS 4.2.

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

Dla osób szukających rozwiązania dla systemu iOS 10 user-scaleable=now Safari na iOS 10 jest wyłączona. Powodem jest to, że Apple próbuje poprawić dostępność, umożliwiając ludziom powiększanie stron internetowych.

Z informacji o wersji :

Aby poprawić dostępność stron internetowych w przeglądarce Safari, użytkownicy mogą teraz powiększać lub pomniejszać, nawet jeśli witryna ustawia opcję skalowalną przez użytkownika = brak w okienku ekranu.

O ile rozumiem, nie mamy szczęścia.

@mattis ma rację, że iOS 10 Safari nie pozwala na wyłączenie szczypania w celu powiększenia za pomocą atrybutu skalowanego przez użytkownika. Mam go jednak do wyłączenia przy użyciu funkcji preventDefault w przypadku zdarzenia „geststart”. Sprawdziłem to tylko w przeglądarce Safari w systemie iOS 10.0.2.

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

dla iPhone'ów safari do iOS 10 „rzutnia” nie jest rozwiązaniem, nie podoba mi się ten sposób, ale użyłem tego kodu javascript i pomógł mi

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

user-scalable=0

To już nie działa na iOS 10. Apple usunął tę funkcję.

Nie ma możliwości, abyś mógł teraz wyłączyć stronę Zoom na iOS, chyba że zrobisz grubą aplikację na platformę.

Spróbuj dodać następujące elementy do tagu głowy:

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

dodatkowo

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

Na koniec, jako atrybut stylu lub w pliku css, dodaj następujący tekst dla przeglądarek opartych na pakiecie webkit:

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

Mam go działa w systemie iOS 12 z następującym kodem:

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

Z pierwszą instrukcją if zapewniam, że będzie działać tylko w środowiskach iOS (jeśli uruchomi się w Androidzie, zachowanie przewijania zostanie zerwane). Zwróć także uwagę na passiveopcję ustawioną na false.

Działa to dobrze w IOS 10.3.2

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

dziękuję @arthur i @aleclarson

Udało mi się zatrzymać to zachowanie, dodając następujące elementy do nagłówka HTML. Działa to na urządzeniach mobilnych, ponieważ przeglądarki stacjonarne obsługują powiększanie podczas używania kółka myszy. Nie jest to wielka sprawa w przeglądarkach komputerowych, ale ważne jest, aby wziąć to pod uwagę.

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

oraz następująca reguła do arkusza stylów CSS

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

czasami te inne dyrektywy w contenttagu mogą zepsuć najlepsze zgadywanie / heurystykę Apple dotyczące sposobu układania strony, wszystko, czego potrzebujesz, aby wyłączyć powiększenie szczypta, to.

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

W przeglądarce Safari 9.0 i nowszych możesz użyć kurczenia w celu dopasowania do metatagu rzutni, jak pokazano poniżej

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

Głupio miałem div otoki, który miał szerokość mierzoną w pikselach. Inne przeglądarki wydawały się wystarczająco inteligentne, aby sobie z tym poradzić. Po przekonwertowaniu szerokości na wartość procentową działało również dobrze na Safari Mobile. Bardzo irytujące.

.page{width: 960px;}

do

.page{width:93.75%}

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

Korzystanie z CSS touch-action właściwości jest najbardziej eleganckim rozwiązaniem. Testowane na iOS 13.5.

Aby wyłączyć gesty powiększania i zsuń dwa razy, aby powiększyć:

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

Jeśli Twoja aplikacja nie wymaga również przesuwania , tj. Przewijania, użyj tego:

body {
  touch-action: none;
}

Aby spełnić wymagania dotyczące dostępności WAI WCAG 2.0 AA, nigdy nie należy wyłączać powiększania szczyptą. (WCAG 2.0: SC 1.4.4 Zmień rozmiar tekstu na poziomie AA). Możesz przeczytać więcej na ten temat tutaj: Dostępność mobilna: jak WCAG 2.0 i inne wytyczne W3C / WAI odnoszą się do telefonu komórkowego, 2.2 Zoom / powiększenie

Ten powinien działać na iPhonie itp.

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