Jak mogę „wyłączyć” powiększenie strony mobilnej?

316

Tworzę mobilną stronę internetową, która jest w zasadzie dużą formą z kilkoma danymi wejściowymi.

Jednak (przynajmniej na moim telefonie z Androidem), za każdym razem, gdy klikam jakieś dane wejściowe, cała strona powiększa się, zasłaniając resztę strony. Czy jest jakieś polecenie HTML lub CSS, które wyłącza takie powiększanie na stronach internetowych?

html css mobile Martín Fixman
źródło
3
Jak powiedział Greg powyżej, jeśli wejdę na stronę mobilną, która wyłącza powiększanie, pierwszą rzeczą, którą zwykle robię, jest naciśnięcie przycisku Wstecz (chyba że to coś, co naprawdę muszę zobaczyć) i jestem pewien, że nie jestem jedyny . Ponadto, mówiąc z mojego doświadczenia, większość stron, które mają wyłączone powiększanie, również używają małych czcionek, co powoduje, że czytanie tekstu jest trudne i bardzo niewygodne.
tomasz86
8
Zgadzam się, że nie należy go wyłączać w przypadku większości witryn, ale są przypadki użycia, w których możesz chcieć wyłączyć domyślne powiększanie - na przykład mobilne gry internetowe, w których możesz chcieć zastąpić powiększanie, aby zrobić coś innego.
Łukasz
11
Nie chcesz - jeśli użytkownicy chcą powiększyć, pozwól im to zrobić. Poza tym: Chrome ma opcję zignorowania Twojego żądania.
Martin
2
Użytkownicy Androida Firefox mają dodatek Always Zoom for Firefox . Wysoce polecany.
Colin D Bennett,
2
Z iOS 10 , user-scalable=nojest ignorowany. Zobacz to
Raptor,

Odpowiedzi:

443

To powinno być wszystko, czego potrzebujesz 

<meta 
     name='viewport' 
     content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' 
/>
kgutteridge
źródło
23
wyłącza to również ogólnie możliwość powiększania przez użytkownika, a także zdolność przeglądarki do automatycznego dostosowywania sposobu dopasowania strony do obszaru wyświetlania - wszystko, czego Martin szuka, to sposób na wyłączenie „powiększania przy kliknięciu wejścia” zachowanie.
matt lohkamp
3
W tej chwili ktoś w Posterous właśnie to zrobił, mając czcionkę o wielkości 12 pikseli, więc jest ona nieczytelna i nie mogę jej obejść.
Emil Iwanow
41
Każda osoba niedowidząca, w tym ja, nienawidzi tego bardziej niż czegokolwiek innego. Muszę zrobić zrzuty ekranu ze stron, które to robią, a następnie powiększyć je w przeglądarce zdjęć.
Jack Marchetti
6
Co robi drugi metatag? Czy nie ma width=device-widthjuż pierwszego metatagu?
Łukasz
1
wydaje się, że to nie działa na iOS 7. Zobacz odpowiedź
lukad03
159

Dla tych z was, którzy spóźniają się na przyjęcie, odpowiedź kgutteridge nie działa dla mnie, a odpowiedź Benny'ego Neugebauera obejmuje docelową gęstość dpi ( funkcja jest przestarzała ).

To jednak działa dla mnie: 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Luke Keller
źródło
7
To jest poprawna odpowiedź teraz. Inne odpowiedzi już nie działają (przynajmniej dla iOS 7).
KyleFarris
7
Ktoś próbował tego na iOS 10.x Nie wydaje mi się, żeby to działało?
JMac
Nie działa dla mnie. Zmienił rozmiar całego ekranu za pomocą paska przewijania i złego powiększenia.
Cocorico,
1
Wciąż nie działa na Safari / iOS 11 z powodu problemu z SFB w Apple.
15ee8f99-57ff-4f92-890c-b56153
52

Istnieje tu kilka podejść - i chociaż istnieje taka sytuacja, że zazwyczaj użytkownicy nie powinni być ograniczani, jeśli chodzi o powiększanie w celu ułatwienia dostępu, mogą wystąpić przypadki, w których jest to wymagane:

Renderuj stronę na szerokość urządzenia, nie skaluj:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Zapobiegaj skalowaniu i uniemożliwiaj użytkownikowi powiększanie:

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

Usuwanie całego powiększania, całego skalowania

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
SW4
źródło
„zwykle użytkownicy nie powinni być ograniczani”, ale przy tworzeniu aplikacji internetowych na urządzenia mobilne często trzeba radzić sobie z „zom-in on focus focus”. W takim przypadku pomocne jest wyłączenie powiększania.
Le 'nton
@ Wyłączenie powiększania na całej stronie przez Le'ntona nie jest dobrym sposobem radzenia sobie z powiększaniem ostrości na wejściu. Przynajmniej w systemie iOS powiększanie ostrości na wejściu można wyłączyć, zwiększając rozmiar czcionki na wejściu.
pfg
39

Możesz użyć:

<head>
  <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
  ...
</head>

Należy jednak pamiętać, że w systemie Android 4.4 właściwość target-gęstośćdpi nie jest już obsługiwana . W przypadku Androida 4.4 i nowszych jako najlepszą praktykę zaleca się:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
Benny Neugebauer
źródło
35

Ponieważ wciąż nie ma rozwiązania dla pierwszego wydania, oto mój czysty CSS dwa centy.

Przeglądarki mobilne (większość z nich) wymagają czcionek o wielkości 16px. Więc

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
  font-size: 16px;
}
Rozwiń fragment kodu

rozwiązuje problem. Nie musisz więc wyłączać funkcji powiększania i utraty dostępności w swojej witrynie.

Jeśli Twój podstawowy rozmiar czcionki nie jest 16px lub nie 16px w telefonach komórkowych, możesz użyć zapytań o media.

@media screen and (max-width: 767px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"] {
    font-size: 16px;
  }
}
Rozwiń fragment kodu

Azamat Rasulov
źródło
2
Dlaczego to rozwiązanie ma tak mało głosów? Jest to zdecydowanie najlepszy sposób na uniknięcie powiększania za pomocą kliknięcia formularza.
KlausCPH
1
Tak; to również rozwiązało mój problem! Nie chciałem całkowicie wyłączać powiększania i właśnie tego potrzebowałem.
brendan
1
Możesz także ustawić font-size: 1remcałą stronę, aby czcionka ładnie skalowała się, jednocześnie unikając problemu „skupiania się na powiększeniu”.
itachi
12

spróbuj dodać ten metatag i styl 

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


<style>
body{
        touch-action: manipulation;
    }
</style>
Sarath Ak
źródło
1
nie powinno touch-actionbyć ustawione na none- developer.mozilla.org/en-US/docs/Web/CSS/touch-action#Values
rahulroy9202
@ rahulroy9202 dla mnie touch-action: manipulation;działało dobrze. touch-action: none;nic nie zrobiłem
Umair
7

Wydaje się, że dodanie metatagów do index.html nie uniemożliwia powiększania strony. Dodanie poniższego stylu zrobi magię.

:root {
  touch-action: pan-x pan-y;
  height: 100% 
}

EDYCJA: Demo: https://no-mobile-zoom.stackblitz.io

API
źródło
2
Należy zaakceptować poprawkę, działającą także na mobilnym safari ATM ios13
Magico
Działa zgodnie z oczekiwaniami od urządzeń mobilnych, dzięki! sprawdź tutaj proyecto26.com/animatable-component
jdnichollsc
6

Możliwe rozwiązanie dla aplikacji internetowych: Chociaż powiększania nie można już wyłączyć w iOS Safari, zostanie ono wyłączone podczas otwierania strony za pomocą skrótu na ekranie głównym.

Dodaj te metatagi, aby zadeklarować swoją aplikację jako „obsługującą aplikację internetową”:

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta name='apple-mobile-web-app-capable' content='yes' />

Tej funkcji należy jednak używać tylko wtedy, gdy aplikacja jest samowystarczalna, ponieważ przyciski do przodu / do tyłu i pasek adresu URL oraz opcje udostępniania są wyłączone. (Nadal możesz jednak przesuwać palcem w lewo i w prawo). Takie podejście umożliwia jednak całkiem podobną aplikację jak ux. Przeglądarka pełnoekranowa uruchamia się tylko wtedy, gdy witryna jest ładowana z ekranu głównego. Udało mi się to również uruchomić po tym, jak włączyłem do folderu głównego ikonę apple-touch-icon-180x180.png.

Jako bonus prawdopodobnie chcesz również uwzględnić wariant tego:

<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent'/>
denkquer
źródło
1

Możesz wykonać to zadanie, po prostu dodając następujący element „meta” do „head”:

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

Dodanie wszystkich atrybutów, takich jak „szerokość”, „początkowa skala”, „maksymalna szerokość”, „maksymalna skala” może nie działać. Dlatego po prostu dodaj powyższy element.

Kasumi Gunasekara
źródło
-1 
<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>

Dodaj skrypt, aby wyłączyć szczypanie, dotknij, ustaw ostrość

Prem
źródło