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

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.

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.

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.

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.

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.

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ą.

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>

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.

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);

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.

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 .

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 }
);

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

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.

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);

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">

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

to zadziałało dla mnie:

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