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


393

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


6
Jeśli tworzysz grę, prawdopodobnie ważna jest kontrola powiększania. Jednak w prawie wszystkich innych przypadkach należy zdecydowanie odradzać. Niestety stało się standardową praktyką dla wielu programistów mobilnych. Jeśli użytkownik chce powiększyć, aby móc łatwiej czytać tekst itp., Nie jest to zbyt przyjemne.
user2268788

72
Wyłączamy zoom w mobilnej aplikacji internetowej. Nie można powiększać rodzimych aplikacji na iOS i nie jest to wymagane w naszej aplikacji internetowej. Jeśli Twoja witryna lub aplikacja jest zoptymalizowana pod kątem urządzeń mobilnych, użytkownicy nie będą musieli powiększać. Zawsze są przypadki użycia do wyłączania zoomu. Nie zawsze musi być tak czy inaczej.
Bradley Flood

10
Tak, nie podążam za logiką, że wyłączenie zoomu w witrynie zoptymalizowanej pod kątem urządzeń mobilnych jest złą rzeczą . O wiele gorsze jest przypadkowe przesuwanie okienka ekranu, ponieważ ekran odbiera przypadkowe przesuwanie i powiększanie w witrynie, która i tak nie wymaga powiększania. Realistycznie, jeśli użytkownicy muszą powiększać treść w witrynie zoptymalizowanej pod kątem urządzeń mobilnych, problemem jest konstrukcja, a nie brak powiększenia.
Nathan Hornby

3
@NathanHornby: Problemem wyłączenia zoomu jest brak poszanowania preferencji użytkownika. Różni użytkownicy preferują różne rozmiary tekstu, młodsi odbiorcy o dobrym wzroku mogą chcieć widzieć więcej treści, a odbiorcy o słabym wzroku nie mogą używać niczego, co nie ma olbrzymiego tekstu. Inni ludzie mają Parkinsona, ale nadal mają dobry wzrok, więc wolą bardzo duże przyciski, ale ogólnie nie korzystają z dużego tekstu.
Lie Ryan,

4
@NathanHornby Nie oznacza to, że projektant niekoniecznie zrobił coś złego. Oznacza to po prostu, że użytkownik, bez względu na przyczynę, chce powiększyć. Pinch-zoom jest standardową funkcją wszystkich telefonów z ekranem dotykowym. Każdy użytkownik, który jest właścicielem takiego telefonu, umie z niego korzystać. Wiem, że to stare pytanie, ale wciąż jestem sfrustrowany przez wszystkich znanych programistów, którzy upierają się przy łamaniu funkcjonalności mojego telefonu, ponieważ uważają, że dzięki temu ich projekty wyglądają lepiej.
user1751825,

Odpowiedzi:


718

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

12
to były fantazyjne cytaty, skopiowałem tag ze strony internetowej bez zauważenia, dziękuję za zwrócenie na to uwagi!
MetaGuru,

5
Być może jest to tutaj na długim ogonie, ale warto zauważyć, że należy to zastosować na stronie „najwyższego poziomu”. Jeśli ten metatag jest zastosowany do elementu iframe, nie będzie on działać, chyba że metatag zostanie również zastosowany na najwyższej stronie.
founddrama

2
Dlaczego ktokolwiek stworzyłby oprogramowanie, które tworzy fantazyjne cytaty, jest poza mną.
Traubenfuchs

3
@Traubenfuchs: Typografia.
BoltClock

3
To dość stara odpowiedź i dochodzę do problemu. Przeczytałem, że jeśli ustawisz opcję skalowalną przez użytkownika na nie, spowoduje to problemy z dostępnością. Począwszy od iOS 10 działa dobrze, pozwalając użytkownikowi na powiększanie, jeśli chce, ale w przeciwnym razie nie można powiększać pola wprowadzania. Nie trzeba też ustawiać dużych rozmiarów czcionek.
David

161

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.


6
Co za okropna decyzja Apple. Używanie pokrętła z przyciskami „-” i „+” do zmniejszania / zwiększania liczby powoduje teraz wielokrotne powiększanie i pomniejszanie strony w iOS Safari. Prasy są interpretowane jako dwukrotne dotknięcie w celu powiększenia, bez możliwości wyłączenia tej opcji. iOS Chrome działa idealnie. Denerwujący.
Paul

5
Mimo, że mam dość tej decyzji, ale jestem naprawdę zadowolony z Apple jako użytkownika, ponieważ chciałem wymusić tę funkcję w wielu witrynach internetowych, w których używały małych elementów.
Bishoy Hanna

10
świat idzie do piekła
malutki

2
O Jezu, kto by zgadł? Kolejny absurdalny wybór dokonany przez Apple
Emil Pedersen

3
Pozostaw Apple, aby wymusić „funkcję” dostępności dla wszystkich, zamiast po prostu dodawać opcję w ustawieniach dostępności ...
Lennholm

98

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

8
W systemie iOS 10 okazało się, że to zadziałało, ale jeśli przewiniesz stronę, a następnie zbliżysz ją do siebie podczas przewijania, pozwoli to na powiększenie. Następnie utkniesz na nowym poziomie powiększenia, dopóki nie przewiniesz ponownie. To nie wygląda na dobre rozwiązanie, chyba że treść strony nie jest przewijalna. :(
Rand Scullard,

1
Jedno zastrzeżenie: użytkownik może jeszcze dwukrotnie dotknąć ekranu, który będzie / może powiększyć i nie zostanie przez to złapany.
Stephen

1
Nadal czasami umożliwia powiększanie poprzez dwukrotne dotknięcie ekranu. :(
Jarzka

4
Czym jest „podwójne dotknięcie” gesturestart? dblclick ?
lowtechsun

3
Kolejna uwaga, jeśli chcesz wyłączyć podwójne powiększanie. Mobilne Safari obsługuje także funkcję „touch-action: manipulation” (wchodzi w zakres „podstawowej obsługi”, która wyłącza zdarzenia podwójnego dotknięcia. Dokumentacja tutaj: developer.mozilla.org/en-US/docs/Web/CSS/touch-action
jeremypress

15

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

3
Powinno byćevent.scale !== 1
aleclarson

@aleclarson event.scale> 1 włącz warunek event.scale! == 1
Arthur Tsidkilov

@aleclarson, aby zapobiec powiększaniu w Mobile Safari, wystarczy, napisałem, że nie podoba mi się ten sposób, zwykle trzeba korzystać z okienka ekranu, ale na IOS iPhone 6 i nowszych nie działa (myślę, że Twój event.scale ! == 1 powinno być bardziej poprawne, ale to wszystko nie jest poprawne, to rodzaj hakowania)
Arthur Tsidkilov

@aleclarson Wydaje się, że używa! == psuje natywną przeglądarkę w Androidzie 4.4; event.scale jest niezdefiniowany.
James Pizzurro,

3
@JamesPizzurro Tak, możesz użyćevent.scale !== undefined && event.scale !== 1
aleclarson

11
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ę.


Taki głupek ... Masz pomysł, dlaczego to usunęli?
Stephen Tetreault

3
@smt nie chcą, aby wrażenia internetowe konkurowały z doświadczeniami aplikacji w sklepie z aplikacjami.
Marvin Danig,

2
@marvindanig tak ... ponieważ pobierają 99 $ opłaty za stworzenie aplikacji, która w innym przypadku mogłaby być łatwiej dostępna dla wszystkich platform. Również Apple nie może polubić „doświadczenia internetowego”, jeśli oznacza to, że użytkownicy + twórcy mogą uniknąć ogrodzonego ogrodu. Chodzi o moc i pieniądze Apple :(
humanityANDpeace

W rzeczywistości można to uruchomić w nowszych wersjach iOS. Zobacz moją odpowiedź: stackoverflow.com/a/62165035
Feross

7

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
}

Nie działa na nowszych wersjach iOS
Feross

7

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.


Nie działa na moim iOS 12.3.1, tutaj jest link testowy: https://output.jsbin.com/liqiraj
Jess

4

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


iOS 13 zmienia wartość false na {passive: false}
sposób na

4

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


Nie działa na nowszych wersjach iOS
Feross

3

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

Nie działa na nowszych wersjach iOS
Feross

2

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

Nie działa na nowszych wersjach iOS
Feross

0

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>

0

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

-3

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


13
To nie jest odpowiedź .. i wielu klientów prosi o blokowanie zoomu, więc nie mogę tego traktować jako ogólnej zasady

9
Powiększenie dostępności nie jest obowiązkiem strony (ani żadnej aplikacji w tym zakresie). Zapewnienie dostępnego narzędzia do powiększania jest obowiązkiem systemu operacyjnego. Obecnie każdy system operacyjny udostępnia taką funkcję, która ma zastosowanie jako powiększenie ekranu i nie powinna zakłócać samego powiększania strony, ponieważ nie jest ona przeznaczona do ułatwienia dostępu.
Bruno Finger,

4
Zawsze istnieją ważne przypadki użycia dla takich rzeczy. Z jakiegoś powodu prawie cała literatura internetowa zakłada, że ​​sieć służy wyłącznie do tworzenia blogów. Tak jak istnieją prawidłowe przypadki użycia dla skryptów JavaScript eval(), tak też istnieje możliwość wyłączenia powiększania. Używam go do aplikacji internetowej, która jest używana w połączeniu ze skanerem Bluetooth, aby zapobiec powiększaniu strony podczas skanowania kodu kreskowego.
user128216,

3
Całkowicie zgadzam się z celami zaleceń dotyczących dostępności, ale nie ma wątpliwości, że zdarzają się sytuacje, w których powiększenie nie jest pożądane ani potrzebne, a nawet może zepsuć wrażenia użytkownika. Plus, wiesz, klienci.
Chuck Le Butt,

2
Powiedziałbym, że w aplikacji html / javascript te wytyczne nie mają zastosowania. W końcu, czy natywna aplikacja umożliwia powiększanie i pomniejszanie?
Jörgen Sigvardsson

-5

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">
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.