wyłączyć powiększanie widocznego obszaru safari w iOS 10+?

164

Zaktualizowałem mojego iPhone'a 6 plus do wersji beta iOS 10 i właśnie odkryłem, że w mobilnym safari możesz powiększać dowolne strony internetowe, dwukrotnie dotykając lub szczypiąc IGNORUJ ten user-scalable=nokod w znaczniku meta. Nie wiem, czy to błąd czy funkcja. Jeśli jest to uważane za funkcję, w jaki sposób możemy wyłączyć powiększanie widoku safari w iOS 10?


zaktualizowane w wersji iOS 11/12, iOS 11 i iOS 12 safari nadal NIE szanują user-scalable=nometatagu.

mobilna witryna github w przeglądarce Safari

Sam Su
źródło
2
Funkcja ułatwień dostępu: uwaga w Safari na iOS 10 twitter.com/thomasfuchs/status/742531231007559680/photo/1
ErikE,
87
Nie, nie jest. Jest to zła praktyka w przypadku zwykłych treści internetowych. W przypadku aplikacji internetowych domyślne zachowanie zoomu może całkowicie zrujnować użyteczność. Na przykład nikt nie chce powiększać przycisku zwiększania kanału, ponieważ dwukrotnie go stuknął, ani powiększać części gry wideo, ponieważ dwukrotnie stuknął przycisk skoku. Jest powód, dla którego ta funkcja została dodana w pierwszej kolejności i nie ma sensu łamać użyteczności dla wszystkich tylko dlatego, że kilku „projektantów stron internetowych” nie wie, co robią. Idź krzyczeć na projektantów witryny i przestań łamać przeglądarkę.
dgatwood
36
Stwierdzenie, że to „zła praktyka” jest opinią i nie zmienia faktu, że Apple nalega na przyjmowanie standardów sieciowych, które społeczność spędza miesiące / lata / dekady, wdrażając je na różnych platformach i biorąc na nie gigantyczne bzdury. Dlaczego Apple miałoby narzucać projektantom stron internetowych, że nie wiedzą, co robią? Okropny argument.
samrap
2
Osobiście uważam, że wynika to z gotowego kodu online, w którym programiści po prostu kopiują i wklejają na ślepo, nie wiedząc, do czego służy kod.
William Isted
7
Odpowiedź jest prosta, Apple: ustaw wyłączenie metatagu jako domyślne ustawienie dostępności wyłączone. Ci, którzy tego potrzebują, będą go mieli, bez karania tych, którzy tego nie chcą.
Ruben Martinez Jr.

Odpowiedzi:

94

W Safari na iOS 10 można zapobiec skalowaniu strony internetowej, ale będzie to wymagało więcej pracy z Twojej strony. Domyślam się, że argument jest taki, że stopień trudności powinien powstrzymać twórców kultowych ładunków przed dodawaniem „user-scalable = no” do każdego znacznika viewport i niepotrzebnie utrudniającym pracę użytkownikom z dysfunkcją wzroku.

Mimo to chciałbym, aby firma Apple zmieniła swoją implementację, aby istniał prosty (metatag) sposób na wyłączenie podwójnego dotknięcia, aby powiększyć. Większość trudności dotyczy tej interakcji.

Możesz przerwać powiększanie przez szczypanie za pomocą czegoś takiego:

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

Należy zauważyć, że jeśli jakiekolwiek głębsze cele wywołują stopPropagation w zdarzeniu, zdarzenie nie dotrze do dokumentu, a ten detektor nie zapobiegnie skalowaniu.

Wyłączenie podwójnego dotknięcia, aby powiększyć jest podobne. Wyłączasz dowolne dotknięcie dokumentu, które ma miejsce w ciągu 300 milisekund od poprzedniego dotknięcia:

var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
  var now = (new Date()).getTime();
  if (now - lastTouchEnd <= 300) {
    event.preventDefault();
  }
  lastTouchEnd = now;
}, false);

Jeśli nie skonfigurujesz poprawnie elementów formularza, skupienie się na danych wejściowych spowoduje automatyczne powiększenie, a ponieważ w większości wyłączyłeś ręczne powiększanie, teraz prawie niemożliwe będzie cofnięcie powiększenia. Upewnij się, że rozmiar czcionki wejściowej to> = 16 pikseli.

Jeśli próbujesz rozwiązać ten problem w WKWebView w aplikacji natywnej, powyższe rozwiązanie jest wykonalne, ale jest to lepsze rozwiązanie: https://stackoverflow.com/a/31943976/661418 . Jak wspomniano w innych odpowiedziach, w iOS 10 beta 6 firma Apple dostarczyła teraz flagę, która ma honorować metatag.

Aktualizacja z maja 2017 r .: Zastąpiłem starą metodę wyłączania powiększania przez szczypanie, polegającą na sprawdzaniu długości dotknięcia przy starcie dotykowym, prostszym podejściem do sprawdzania zdarzenia. Skalowanie po dotknięciu. Powinien być bardziej niezawodny dla każdego.

Józefa
źródło
3
Zauważ, że hack startowy jest niespójny ... i jeśli uda ci się go ominąć, utkniesz w bardzo niewygodnym stanie
Sam Saffron
5
Na przykład. pełnoekranowe aplikacje do mapowania, w aplikacji do obsługi map (Google Maps JS, Leaflet itp.) jest na stałe zakodowana funkcja powiększania. Google radzi, aby dodać metatag, <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />a jeśli przeglądarka nie przestrzega metatagu, jest to bardzo zły projekt przeglądarki. Drugi, podobny do bardzo złego projektu, to ruch wstecz / do przodu poprzez przesuwanie, czemu nie można zapobiec w iOS 9/10. Poważnie przerywa przeciąganie działań wewnątrz aplikacji internetowej.
Timo Kähkönen
4
Jeśli użytkownik zacznie przeciągać jednym palcem, a następnie połóż drugi palec na ekranie, będzie mógł powiększać palcem. Można wyłączyć powiększanie lub przewijanie z preventDefaultON touchmove. Nie możesz (całkowicie) wyłączyć powiększenia bez wyłączania przewijania.
Paolo
10
Wow, ta część (wkleję tutaj) była dla mnie BARDZO pomocna. Nie widziałem tego wspominanego przez nikogo innego NIGDZIE w Internecie. Naprawienie tego problemu zajęło mi godziny. Jestem naprawdę rozczarowany wyborami Apple w zakresie projektowania UX w tym zakresie, w których formularze są automatycznie powiększane, ale potem nie zmniejszają. If you don't set up your form elements right, focusing on an input will auto-zoom, and since you have mostly disabled manual zoom, it will now be almost impossible to unzoom. Make sure the input font size is >= 16px.
Ryan
6
Wygląda na to, że to już nie działa w iOS 12. Masz jakiś pomysł, jak to działa na iOS 12?
TJR
78

To nowa funkcja w iOS 10.

Z informacji o wersji iOS 10 beta 1:

  • Aby poprawić dostępność w witrynach internetowych w Safari, użytkownicy mogą teraz powiększać palce, nawet gdy witryna jest ustawiona user-scalable=now widoku.

Spodziewam się, że wkrótce zobaczymy dodatek JS, który w jakiś sposób to wyłączy.

Paul Gerarts
źródło
4
@Onza: Nie sądzę, że to jest złe. Myślę, że to jest dobre. Wyłączenie szczypania / powiększania (domyślne zachowanie użytkownika) jest uważane za złe i robi to wiele witryn mobilnych. Jedynym dopuszczalnym przypadkiem użytkownika byłaby prawdziwa aplikacja internetowa, która wygląda i działa jak aplikacja.
wouterds
6
Źle ... Zmieniam rzutnię za pomocą js i blokuję powiększanie tylko wtedy, gdy na stronie są zaznaczone jakieś elementy, teraz jest zepsuty przez tę "decyzję". Jeśli ktoś zdecyduje się to zablokować - jest powód.
Zhenya
9
@Karlth to bardzo łóżko dla twórcy gier
Sandeep
14
Mam IOS 10.0.2, skalowalny przez użytkownika = nie, nie wyłącza już powiększania na naszej stronie ... Nasz główny problem z powiększaniem dotyczy naszego stałego menu bocznego .. Po prostu psuje układ .. Jakieś pomysły lub rozwiązania w tej sprawie? Rozumiem, że powiększanie jest dobre dla ułatwień dostępu, udostępniliśmy powiększanie w określonych częściach naszej witryny przy użyciu zdarzeń js (młotek) i css .. Nie rozumiem, dlaczego należy narzucić wszystkim regułę, wygląda na to, że zaczyna się policja na PC przejąć również nasz świat deweloperów ?!
zestaw internetowy,
50
„Jedynym dopuszczalnym przypadkiem użytkownika byłaby prawdziwa aplikacja internetowa, która wygląda i działa jak aplikacja”. - i jest to, jak powiedziałeś, prawdziwy, akceptowalny przypadek użycia, który nie jest taki rzadki ...
Florrie
21

Udało mi się to naprawić za pomocą touch-actionwłaściwości css na poszczególnych elementach. Spróbuj ustawić touch-action: manipulation;elementy, które są często klikane, takie jak linki lub przyciski.

iainbeeston
źródło
1
„manipulacja” nie zapobiega powiększaniu przez szczypanie, tylko powiększanie przez dwukrotne dotknięcie.
Moos
4
To powinna być akceptowana odpowiedź. możesz użyć touch-action: none;do samodzielnego sterowania wszystkimi gestami.
Guy Sopher,
4
to świetnie - wyłączenie podwójnego stuknięcia przy powiększaniu przy jednoczesnym pozostawieniu powiększania przez szczypanie, które POWINIEN być traktowane jako gest - dwukrotne stuknięcie nie powinno. 1 pies to pies. 1 pies + 1 pies nie robi promu kosmicznego. Tworzy 2 psy i robią rzeczy, których można by się spodziewać po 2 psach. Nigdy nie spodziewałem się, że 2 psy będą promem kosmicznym. Nigdy.
Larry
5
@GuySopher iOS zapewnia nietouch-action: none tylko manipulatoin, co pozostawia problem z powiększaniem przez szczypanie.
ludzkość I pokój
14

Wygląda na to, że to zachowanie zostało rzekomo zmienione w najnowszej wersji beta, która w chwili pisania jest wersją beta 6.

Z informacji o wersji dla iOS 10 Beta 6:

WKWebViewteraz domyślnie uwzględnia się user-scalable=noz rzutni. Klienci WKWebViewmogą poprawić dostępność i pozwolić użytkownikom na powiększanie przez szczypanie na wszystkich stronach, ustawiając WKWebViewConfiguration właściwość ignoresViewportScaleLimitsna YES.

Jednak w moich (bardzo ograniczonych) testach nie mogę jeszcze potwierdzić, że tak jest.

Edycja: zweryfikowana, iOS 10 Beta 6 user-scalable=nodomyślnie szanuje mnie.

Cellane
źródło
11
10.0.1 tutaj. Nie szanuje tego. O co chodzi z tym, że Apple pozbywa się funkcji, których wszyscy potrzebują…
lifwanian
1
Odnosi się to WKWebView nie do Safari. Źródło: Jeden z naszych map apps złamał i nie mamy żadnego pojęcia jak to naprawić.
Fabio Poloni
Aha! Przepraszam, przyszedłem tutaj, szukając rozwiązania dla tego samego błędu / funkcji w WKWebViewi jakby założyłem, że pierwotne pytanie zadane WKWebViewpodczas pisania mojej odpowiedzi. Przypuszczam więc, że podczas jednej z pierwszych wersji beta Apple zmieniło zachowanie obu WKWebViewi mobilnego Safari, a następnie w wersji beta 6 odwróciło to zachowanie, WKWebViewale zachowało je dla mobilnego Safari.
Cellane
1
10.0.2 nie przestrzega user-scalable=no. Nie jestem pewien, dlaczego kiedykolwiek mieliby to cofnąć, tylko po to, aby je przywrócić, tylko po to, aby ponownie je usunąć.
Aidan Hakimian
13

Obejście, które działa w Mobile Safari w chwili pisania tego tekstu, polega na umieszczeniu trzeciego argumentu w addEventListenerbe { passive: false }, więc pełne obejście wygląda następująco:

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

Możesz chcieć sprawdzić, czy opcje są obsługiwane, aby zachować zgodność wsteczną.

Casper Fabricius
źródło
3
Czy ktoś próbował tego na iOS 12? Dodałem powyższy kod i nic nie robi dla mojej aplikacji internetowej. Nadal mogę powiększyć to głupie Safari. Moi meta tag rzutni wygląda jak ten: btw <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">.
Patrick DaVader
1
@PatrickDaVader Tak, nie mogę znaleźć żadnego działającego rozwiązania dla iOS 12 Safari. Dostaję choroby morskiej od nieustannego przybliżania.
Jamie Birch
1
Ten działa w iOS 13. Moje tagi <meta> to: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no, shrink-to-fit=no" />i<meta name="HandheldFriendly" content="true">
Sterling Bourne
1
@SterlingBourne Skopiowano konfigurację. Działa, ale tylko w 90% przypadków. Nie wiem, dlaczego nie przez cały czas.
Hillcow,
1
Odpowiedź @SterlingBourne zadziałała dla mnie! Dzięki. Powinien opublikować go jako odpowiedź, a nie komentarz, aby można go było głosować <meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, viewport-fit = cover, user-scalable = no, shrink-to-fit = no "/> i <meta name =" HandheldFriendly "content =" true ">
Gene Black
8

Spędziłem około godziny szukając solidniejszej opcji javascript i nie znalazłem żadnej. Tak się składa, że ​​w ciągu ostatnich kilku dni majstrowałem przy hammer.js (Hammer.js to biblioteka, która pozwala łatwo manipulować wszelkiego rodzaju zdarzeniami dotykowymi) i najczęściej nie udaje mi się to, co próbowałem zrobić.

Mając to zastrzeżenie i rozumiejąc, że w żadnym wypadku nie jestem ekspertem od javascript, jest to rozwiązanie, które wymyśliłem, które w zasadzie wykorzystuje hammer.js do przechwytywania zdarzeń pinch-zoom i double-tap, a następnie rejestruje je i odrzuca.

Upewnij się, że na swojej stronie umieścisz hammer.js, a następnie spróbuj umieścić ten skrypt w głowie gdzieś:

< script type = "text/javascript" src="http://hammerjs.github.io/dist/hammer.min.js"> < /script >
< script type = "text/javascript" >

  // SPORK - block pinch-zoom to force use of tooltip zoom
  $(document).ready(function() {

    // the element you want to attach to, probably a wrapper for the page
    var myElement = document.getElementById('yourwrapperelement');
    // create a new hammer object, setting "touchAction" ensures the user can still scroll/pan
    var hammertime = new Hammer(myElement, {
      prevent_default: false,
      touchAction: "pan"
    });

    // pinch is not enabled by default in hammer
    hammertime.get('pinch').set({
      enable: true
    });

    // name the events you want to capture, then call some function if you want and most importantly, add the preventDefault to block the normal pinch action
    hammertime.on('pinch pinchend pinchstart doubletap', function(e) {
      console.log('captured event:', e.type);
      e.preventDefault();
    })
  });
</script>

sporker
źródło
Próbowałem również rozwiązać ten problem podczas pracy z hammer.js i mogę potwierdzić, że mogłem zapobiec powiększeniu widoku, dodając a .preventDefaultdo wszystkich programów obsługi gestów młotka. Używam razem machnięcia / szczypania / przesuwania / stukania, dodałem to do wszystkich programów obsługi, nie wiem, czy jest jakiś konkretny, który wykonuje tę pracę.
Conan
6

Wypróbowałem poprzednią odpowiedź dotyczącą powiększania przez szczypanie

document.documentElement.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
        event.preventDefault();
    }
}, false);

Jednak czasami ekran nadal się powiększa, gdy event.touches.length> 1 Odkryłem, że najlepszym sposobem jest użycie zdarzenia touchmove, aby uniknąć poruszania palcem po ekranie. Kod będzie wyglądał mniej więcej tak:

document.documentElement.addEventListener('touchmove', function (event) {
    event.preventDefault();      
}, false);

Mam nadzieję, że to pomoże.

Chihying Wu
źródło
7
Działa to tylko wtedy, gdy Twoja aplikacja jest idealnie dopasowana ... jeśli masz przewijalną zawartość, nie działa ... nadal niezły hack dla niektórych scenariuszy.
eljamz
8
To nawet wyłącza przewijanie na stronie internetowej .. BAD
Gagi
@eljamz dzięki za daj mi znać i tak ... moja aplikacja jest idealnie dopasowana do ekranu.
Chihying Wu
@Gags Nie testowałem jeszcze funkcji przewijania, dzięki za daj mi znać.
Chihying Wu
6

Sprawdź współczynnik skali w zdarzeniu dotknięcia, a następnie zapobiegaj zdarzeniu dotykowemu.

document.addEventListener('touchmove', function(event) {
    event = event.originalEvent || event;
    if(event.scale > 1) {
        event.preventDefault();
    }
}, false);
Parmod
źródło
2
iOS 13 zmienił false na {passive: false}
wayofthefuture
6

Możemy uzyskać wszystko, czego chcemy, wstrzykując jedną regułę stylu i przechwytując zdarzenia powiększenia:

$(function () {
  if (!(/iPad|iPhone|iPod/.test(navigator.userAgent))) return
  $(document.head).append(
    '<style>*{cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}</style>'
  )
  $(window).on('gesturestart touchmove', function (evt) {
    if (evt.originalEvent.scale !== 1) {
      evt.originalEvent.preventDefault()
      document.body.style.transform = 'scale(1)'
    }
  })
})

✔ Wyłącza powiększanie przez szczypanie.

✔ Wyłącza powiększanie za pomocą dwukrotnego dotknięcia.

✔ Nie ma to wpływu na przewijanie.

✔ Wyłącza podświetlenie dotknięcia (wyzwalane w iOS przez regułę stylu).

UWAGA: Dostosuj wykrywanie iOS do swoich upodobań. Więcej na ten temat tutaj .


Przepraszamy Lukejackson i Piotr Kowalski , których odpowiedzi pojawiają się w zmodyfikowanej formie w powyższym kodzie.

jeff_mcmahan
źródło
Działa to na moim emulatorze iPada z systemem iOS 11.2. Na moim prawdziwym iPadzie z systemem iOS 11.3 to nie działa. Dodałem console.log, aby upewnić się, że zdarzenia są uruchamiane i pojawiają się w konsoli. To ma coś wspólnego z iOS 11.3? Lub z prawdziwymi urządzeniami?
Mathieu R.
1
@MathieuR. Jest to problem z systemem iOS 11.3. Można to skorygować, używając jednej z addEventListeneropartych na niej odpowiedzi i podając { passive: false }jako optionsparametr zamiast false. Jednak w celu zapewnienia zgodności z poprzednimi wersjami należy przejść, falsechyba że passivepole opcji jest obsługiwane. Zobacz developer.mozilla.org/en-US/docs/Web/API/EventTarget/…
Josh Gallagher
@JoshGallagher Czy możesz podać działający przykład? Na iOS11 żadna z odpowiedzi nie działa dla mnie.
Mick,
`` Geststart '' -> PreventDefault działa dla mnie w momencie pisania na iOS 12,2
Michael Camden
5

Wymyśliłem dość naiwne rozwiązanie, ale wydaje się, że działa. Moim celem było zapobieżenie interpretowaniu przypadkowego dwukrotnego dotknięcia jako powiększenia, przy jednoczesnym zachowaniu funkcji szczypania, aby powiększyć, działając na rzecz dostępności.

Chodzi o to, aby zmierzyć czas między pierwszym touchstarta drugim touchenddotknięciem, a następnie zinterpretować ostatnie touchendjako kliknięcie, jeśli opóźnienie jest zbyt małe. Zapobiegając przypadkowemu powiększeniu, ta metoda wydaje się nie zmieniać przewijania listy, co jest miłe. Nie jestem pewien, czy niczego nie przegapiłem.

let preLastTouchStartAt = 0;
let lastTouchStartAt = 0;
const delay = 500;

document.addEventListener('touchstart', () => {
  preLastTouchStartAt = lastTouchStartAt;
  lastTouchStartAt = +new Date();
});
document.addEventListener('touchend', (event) => {
  const touchEndAt = +new Date();
  if (touchEndAt - preLastTouchStartAt < delay) {
    event.preventDefault();
    event.target.click();
  }
});

Zainspirowany streszczeniem mutewinter i odpowiedzią Josepha .

Alexander Kachkaev
źródło
5

W moim przypadku używam Babylon.js do stworzenia sceny 3D, a cała moja strona składa się z jednego płótna pełnoekranowego. Silnik 3D ma własną funkcję powiększania, ale w systemie iOS funkcja pinch-to-zoom to przeszkadza. Zaktualizowałem odpowiedź @Joseph, aby rozwiązać mój problem. Aby to wyłączyć, odkryłem, że muszę przekazać {passive: false} jako opcję do detektora zdarzeń. U mnie działa następujący kod:

window.addEventListener(
    "touchmove",
    function(event) {
        if (event.scale !== 1) {
            event.preventDefault();
        }
    },
    { passive: false }
);
Hamed
źródło
Mój przypadek użycia to również scena 3D na całej stronie z niestandardowymi kontrolkami szczypania. Byłbym zatopiony, gdyby nie było obejścia dla Apple jawnie ignorującego skalę użytkownika: brak meta.
Nick Bilyk,
1

Choć może się to wydawać dziwne, przynajmniej w przypadku Safari w iOS 10.2 dwukrotne dotknięcie, aby powiększyć, jest magicznie wyłączone, jeśli element lub którykolwiek z jego przodków ma jedną z następujących cech:

  1. Słuchacz onClick - to może być zwykły noop.
  2. cursor: pointerZestaw w CSS
mariomc
źródło
co powiesz na szczypanie?
Sam Su,
Niestety, to rozwiązanie nie obejmuje funkcji pinch to zoom. W tym celu skorzystaliśmy z rozwiązania zaproponowanego w: stackoverflow.com/a/39594334/374196
mariomc
Nie działa na mnie. Używam wersji 10.2.1 Beta 4 na iPodzie Touch, używając tej strony testowej i dwukrotnie dotykając dowolnego z szarych kwadratów powiększenia: jsbin.com/kamuta/quiet
robocat
1
Mam to na rozpiętości w aplikacji reagującej i nie działa.
FMD
1

Niezamierzone powiększanie zwykle ma miejsce, gdy:

  • Użytkownik dwukrotnie dotyka komponentu interfejsu
  • Użytkownik wchodzi w interakcję z rzutnią za pomocą co najmniej dwóch cyfr (uszczypnięcie)

Aby zapobiec zachowaniu podwójnego dotknięcia , znalazłem dwa bardzo proste obejścia:

<button onclick='event.preventDefault()'>Prevent Default</button>
<button style='touch-action: manipulation'>Touch Action Manipulation</button>

Oba uniemożliwiają Safari (iOS 10.3.2) powiększaniu przycisku . Jak widać, jeden to tylko JavaScript, a drugi tylko CSS. Używaj odpowiednio.

Oto demo: https://codepen.io/lukejacksonn/pen/QMELXQ

Nie próbowałem (jeszcze) zapobiec temu zjawisku, przede wszystkim dlatego, że nie tworzę interfejsów wielodotykowych dla sieci, a po drugie doszedłem do wniosku, że być może wszystkie interfejsy, w tym interfejs aplikacji natywnej, powinny być „uszczypnij, aby powiększyć” -można miejscami. Nadal projektuję tak, aby użytkownik nie musiał tego robić, aby za wszelką cenę mieć dostęp do interfejsu użytkownika.

lukejacksonn
źródło
1

Znalazłem to proste obejście, które wydaje się zapobiegać dwukrotnemu kliknięciu, aby powiększyć:

    // Convert touchend events to click events to work around an IOS 10 feature which prevents
    // developers from using disabling double click touch zoom (which we don't want).
    document.addEventListener('touchend', function (event) {
        event.preventDefault();
        $(event.target).trigger('click');
    }, false);
Składnia
źródło
1

Zgodnie z prośbą przeniosłem swój komentarz do odpowiedzi, aby ludzie mogli ją zagłosować:

Działa to w 90% przypadków w przypadku iOS 13:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no, shrink-to-fit=no" />

i

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

Sterling Bourne
źródło
0

Wszystkie powyższe odpowiedzi sprawdziłem w praktyce na mojej stronie na iOS (iPhone 6, iOS 10.0.2), ale bezskutecznie. To jest moje rozwiązanie robocze:

$(window).bind('gesturestart touchmove', function(event) {
    event = event.originalEvent || event;
    if (event.scale !== 1) {
         event.preventDefault();
         document.body.style.transform = 'scale(1)'
    }
});
Piotr Kowalski
źródło
Niestety działa to tylko wtedy, gdy Twoja strona jest idealnie dopasowana, a nie wtedy, gdy masz przewijaną zawartość
Shoe
Hmm. Z mojego doświadczenia wynika, że ​​działa to dobrze z przewijalną zawartością (iOS 10.3).
jeff_mcmahan
0

to zadziałało dla mnie:

document.documentElement.addEventListener('touchmove', function (event) {
    event.preventDefault();
}, false);
Diego Santa Cruz Mendezú
źródło
Próbowałem tego, zapobiegało to powiększaniu przez szczypanie, jednak wyłącza przewijanie dotykowe w widoku, więc nie można już przewijać strony w górę iw dół.
TGR