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=no
kod 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=no
metatagu.
Odpowiedzi:
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:
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:
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.
źródło
<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.preventDefault
ONtouchmove
. Nie możesz (całkowicie) wyłączyć powiększenia bez wyłączania przewijania.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.
To nowa funkcja w iOS 10.
Z informacji o wersji iOS 10 beta 1:
Spodziewam się, że wkrótce zobaczymy dodatek JS, który w jakiś sposób to wyłączy.
źródło
Udało mi się to naprawić za pomocą
touch-action
wł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.źródło
touch-action: none;
do samodzielnego sterowania wszystkimi gestami.touch-action: none
tylkomanipulatoin
, co pozostawia problem z powiększaniem przez szczypanie.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:
Jednak w moich (bardzo ograniczonych) testach nie mogę jeszcze potwierdzić, że tak jest.
Edycja: zweryfikowana, iOS 10 Beta 6
user-scalable=no
domyślnie szanuje mnie.źródło
WKWebView
nie do Safari. Źródło: Jeden z naszych map apps złamał i nie mamy żadnego pojęcia jak to naprawić.WKWebView
i jakby założyłem, że pierwotne pytanie zadaneWKWebView
podczas pisania mojej odpowiedzi. Przypuszczam więc, że podczas jednej z pierwszych wersji beta Apple zmieniło zachowanie obuWKWebView
i mobilnego Safari, a następnie w wersji beta 6 odwróciło to zachowanie,WKWebView
ale zachowało je dla mobilnego Safari.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ąć.Obejście, które działa w Mobile Safari w chwili pisania tego tekstu, polega na umieszczeniu trzeciego argumentu w
addEventListener
be{ passive: false }
, więc pełne obejście wygląda następująco:Możesz chcieć sprawdzić, czy opcje są obsługiwane, aby zachować zgodność wsteczną.
źródło
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
.<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">
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ś:
źródło
.preventDefault
do 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ę.Wypróbowałem poprzednią odpowiedź dotyczącą powiększania przez szczypanie
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:
Mam nadzieję, że to pomoże.
źródło
Sprawdź współczynnik skali w zdarzeniu dotknięcia, a następnie zapobiegaj zdarzeniu dotykowemu.
źródło
Możemy uzyskać wszystko, czego chcemy, wstrzykując jedną regułę stylu i przechwytując zdarzenia powiększenia:
✔ 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.
źródło
addEventListener
opartych na niej odpowiedzi i podając{ passive: false }
jakooptions
parametr zamiastfalse
. Jednak w celu zapewnienia zgodności z poprzednimi wersjami należy przejść,false
chyba żepassive
pole opcji jest obsługiwane. Zobacz developer.mozilla.org/en-US/docs/Web/API/EventTarget/…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
touchstart
a drugimtouchend
dotknięciem, a następnie zinterpretować ostatnietouchend
jako 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.Zainspirowany streszczeniem mutewinter i odpowiedzią Josepha .
źródło
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:
źródło
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:
cursor: pointer
Zestaw w CSSźródło
Niezamierzone powiększanie zwykle ma miejsce, gdy:
Aby zapobiec zachowaniu podwójnego dotknięcia , znalazłem dwa bardzo proste obejścia:
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.
źródło
Znalazłem to proste obejście, które wydaje się zapobiegać dwukrotnemu kliknięciu, aby powiększyć:
źródło
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">
źródło
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:
źródło
to zadziałało dla mnie:
źródło