Bir mobil web sayfasındaki yakınlaştırmayı nasıl "devre dışı bırakabilirim"?

316

Temelde birkaç metin girişi ile büyük bir form olan bir mobil web sayfası oluşturuyorum.

Ancak (en azından Android cep telefonumda), bazı girişlere her tıkladığımda, sayfanın geri kalanı gizlenerek tüm sayfa yakınlaşır. Mobil web sayfalarında bu tür yakınlaştırmayı devre dışı bırakmak için HTML veya CSS komutu var mı?

html css mobile

— Martín Fixman
kaynak

3

Greg'in yukarıda söylediği gibi, yakınlaştırmayı devre dışı bırakan bir mobil web sitesine girersem, genellikle yaptığım ilk şey geri düğmesine basmaktır (gerçekten görmek zorunda olduğum bir şey olmadığı sürece) ve eminim sadece ben değilim . Üstelik, deneyimlerimden bahsetmişken, yakınlaştırmayı devre dışı bırakan bu web sitelerinin çoğunda da küçük yazı tipleri kullanılıyor ve bu da metni okumayı zor ve çok rahatsız ediyor.

— tomasz86

8

Çoğu site için devre dışı bırakılmaması gerektiğini kabul ediyorum, ancak başka bir şey yapmak için yakınlaştırmayı geçersiz kılmak isteyebileceğiniz mobil web oyunları gibi, varsayılan yakınlaştırmayı devre dışı bırakmak isteyebileceğiniz bazı kullanım durumları vardır.

— Luke

11

Yapmazsınız - Kullanıcılar yakınlaştırmak istiyorsa, yapmasına izin verin. Ayrıca: Chrome'un isteğinizi yalnızca göz ardı etme seçeneği vardır.

— Martin

2

Android Firefox kullanıcıları için, Her Zaman Firefox için Zoom eklentisi vardır. Şiddetle tavsiye edilir.

— Colin D Bennett

2

Gönderen iOS 10 , user-scalable=nogöz ardı edilir. Bkz bu

— Raptor

443

Bu ihtiyacınız olan her şey olmalı

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

— kgutteridge
kaynak

23

bu aynı zamanda kullanıcının genel olarak yakınlaştırma yeteneğinin yanı sıra tarayıcının sayfanın görünüm penceresine sığma şeklini otomatik olarak ayarlama yeteneğini de devre dışı bırakır - Martin'in aradığı tek şey 'giriş-tıklama-yakınlaştırmasını' devre dışı bırakmanın bir yoludur. davranışı.

— matt lohkamp

3

Şu anda Posterous'deki biri bunu yaptı, yazı tipini 12 pikselde tutarken okunamıyor ve bunun etrafında bir yol bulamıyorum.

— Emil Ivanov

41

Ben dahil görme engelli her insan bundan her şeyden daha çok nefret eder. Bunu yapan sayfaların ekran kapmalarını alıp resim görüntüleyicisinde yakınlaştırmam gerekiyor.

— Jack Marchetti

6

İkinci meta etiket ne işe yarar? Is not width=device-widthilk meta etiketinde zaten?

— Luke

1

bu iOS 7'de çalışmıyor gibi görünüyor. lukad03 yanıtına bakın

— davivid

159

Partiye geç kalanlarınız için kgutteridge'nin yanıtı benim için çalışmıyor ve Benny Neugebauer'ın yanıtı hedef yoğunluk dpi'sini ( kullanımdan kaldırılan bir özellik) içeriyor .

Ancak bu benim için işe yarıyor:

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

— Luke Keller
kaynak

7

Şimdi doğru cevap bu. Diğer yanıtlar artık çalışmıyor (en azından iOS 7 için).

— KyleFarris

7

Bunu iOS 10.x'te kimsenin denediğini düşünüyorum.

— JMac

Benim için çalışmıyor. Kaydırma çubuğu ve kötü zoom ile tüm ekranı yeniden boyutlandırdı.

— Cocorico

1

Apple'daki SFB sorunu nedeniyle Safari / iOS 11 üzerinde hala çalışmıyor.

— 15ee8f99-57ff-4f92-890c-b56153

52

Burada bir takım yaklaşımlar vardır - ve konum, erişilebilirlik amaçları için yakınlaştırma söz konusu olduğunda tipik olarak kullanıcıların kısıtlanmaması gerektiğine rağmen, gerekli olan yerlerde olaylar olabilir:

Sayfayı cihazın genişliğinde oluşturun, ölçeklendirmeyin:

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

Ölçeklendirmeyi önleyin ve kullanıcının zum yapabilmesini önleyin:

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

Tüm yakınlaştırma, tüm ölçeklendirmeleri kaldırma

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

"tipik olarak kullanıcılar kısıtlanmamalıdır" ancak mobil cihazlar için web uygulamaları geliştirirken genellikle "giriş odağında zom-in" ile uğraşmanız gerekir. Bu durumda yakınlaştırmayı devre dışı bırakmayı yararlı buluyorum.

— Le 'nton

@ Le'nton sayfanın tamamını yakınlaştırmayı devre dışı bırakmak, giriş odağında yakınlaştırmayla başa çıkmak için iyi bir yol değildir. En azından iOS'ta, girişin zoom boyutu girişin yazı tipi boyutunu artırarak devre dışı bırakılabilir.

— pfg

39

Kullanabilirsiniz:

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

Ama o notu memnun Android 4.4 mülkiyet hedef densitydpi artık desteklenmemektedir . Bu nedenle Android 4.4 ve üstü için en iyi uygulama olarak aşağıdakiler önerilmektedir:

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

— Benny Neugebauer
kaynak

35

Başlangıç sorunu için hala bir çözüm olmadığından, saf CSS iki sentim.

Mobil tarayıcılar (çoğu) girişlerde yazı tipi boyutunun 16 piksel olmasını gerektirir. Yani

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

Snippet'i genişlet

sorunu çözer. Bu nedenle, sitenizin yakınlaştırma ve gevşek erişilebilirlik özelliklerini devre dışı bırakmanıza gerek yoktur.

Temel yazı tipi boyutunuz cep telefonlarında 16 piksel veya 16 piksel değilse, medya sorgularını kullanabilirsiniz.

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

Snippet'i genişlet

— Azamat Rasulov
kaynak

2

Bu çözümün neden bu kadar az oyu var? Form tıklama yakınlaştırmasını önlemenin en iyi yoludur.

— KlausCPH

1

Evet; bu da benim sorunumu çözdü! Yakınlaştırmayı tamamen devre dışı bırakmak istemedim ve tam da ihtiyacım olan buydu.

— brendan

1

font-size: 1remTüm sayfa için de ayarlayabilirsiniz , böylece yazı tipi iyi ölçeklenir ve eşzamanlı olarak "zoom-on-zoom" sorununu önler.

— itachi

12

lütfen bu meta etiketi ve stili eklemeyi deneyin

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

1

olmamalıdır touch-actionayarlanmalıdır none- developer.mozilla.org/en-US/docs/Web/CSS/touch-action#Values

— rahulroy9202

@ rahulroy9202 benim için touch-action: manipulation;iyi çalıştı. touch-action: none;hiçbir şey yapmadı

— Umair

7

İndex.html dosyasına yalnızca meta etiketler eklemek sayfanın yakınlaştırılmasını engellemiyor gibi görünüyor. Aşağıdaki stili eklemek büyüyü yapacak.

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

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

— Api
kaynak

2

Bu mobil safari ios13 atm üzerinde çalışan düzeltme kabul edilmelidir

— Magico

Mobilden beklendiği gibi çalışıyor, teşekkürler! Burada kontrol proyecto26.com/animatable-component

— jdnichollsc

6

Web Uygulamaları için Olası Çözüm: Artık iOS Safari'de yakınlaştırma devre dışı bırakılamazken, bir ana ekran kısayolundan site açılırken devre dışı bırakılacak.

Uygulamanızı "Web Uygulaması destekli" olarak bildirmek için bu meta etiketleri ekleyin:

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

Ancak bu özelliği yalnızca uygulamanız kendi kendine devam ediyorsa, ileri / geri düğmeleri ve URL çubuğu ile paylaşım seçenekleri devre dışı bırakıldığında kullanın. (Yine de sola ve sağa kaydırabilirsiniz) Bu yaklaşım ux gibi oldukça uygulamayı sağlar. Tam ekran tarayıcı yalnızca site ana ekrandan yüklendiğinde başlar. ~~Sadece kök klasörüme bir apple-touch-icon-180x180.png ekledikten sonra da işe başladım.~~

Bir bonus olarak, muhtemelen bu değişkenin bir varyantını da eklemek istersiniz:

<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent'/>

— denkquer
kaynak

1

Görevi, 'kafanıza' aşağıdaki 'meta' öğesini ekleyerek gerçekleştirebilirsiniz:

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

'Genişlik', 'başlangıç ölçeği', 'maksimum genişlik', 'maksimum ölçek' gibi tüm niteliklerin eklenmesi işe yaramayabilir. Bu nedenle, yukarıdaki öğeyi eklemeniz yeterlidir.

— Kasumi Gunasekara
kaynak

-1

<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>

Lütfen Sıkışmayı Devre Dışı Bırakmak için Komut Dosyası Ekleme, dokunun, odaklama Yakınlaştırma

— Prem
kaynak