Mobil Safari'de görünüm alanı yakınlaştırmayı nasıl devre dışı bırakırsınız?

Bunların üçünü de boşuna denedim:

<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;” />

her biri google arama veya SO arama tarafından önerilen bulduğum farklı değerlerdir, ancak ' user-scalable = X ' değerlerinin hiçbiri çalışmıyor gibi görünüyor

Ayrıca virgül yerine değerleri sınırlama virgül çalıştı, hayır şans. Sonra SADECE user-scalablemevcut değeri olan çalıştı , hala şans yok.

GÜNCELLEME

Bunu Apple'ın sitesinden aldım ve işe yarıyor:

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

meta etiketi, bunları kullanan bir web sitesinden kopyaladığım için sorunun standart olmayan tırnaklar olduğu ortaya çıktı

Kodunuz süslü çift tırnak olarak çift tırnak özelliği gösteriyor. Süslü alıntılar gerçek kaynak kodunuzda mevcutsa, sorun olduğunu tahmin ediyorum.

Bu, iOS 4.2'deki Mobil Safari'de benim için çalışıyor.

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

İOS 10 çözümü arayan kullanıcılar için iOS 10 user-scaleable=noiçin Safari'de devre dışı bırakıldı. Bunun nedeni, Apple'ın kullanıcıların web sayfalarını yakınlaştırmalarına izin vererek erişilebilirliği artırmaya çalışmasıdır.

Sürüm notlarından :

Safari'deki web sitelerindeki erişilebilirliği artırmak için, bir web sitesi görünüm alanında kullanıcı tarafından ölçeklendirilebilir = no ayarlasa bile kullanıcılar yakınlaştırma / uzaklaştırma yapabilirler.

Anladığım kadarıyla şanssızız.

@mattis, iOS 10 Safari'nin kullanıcı tarafından ölçeklenebilir özellik ile yakınlaştırmak için çimdiklemeyi devre dışı bırakmanıza izin vermeyeceği doğrudur. Ancak, 'gesturestart' olayında preventDefault kullanarak devre dışı bırakmak için aldım. Bunu yalnızca iOS 10.0.2'deki Safari'de doğruladım.

document.addEventListener('gesturestart', function (e) {
    e.preventDefault();
});

IPhone 10 kadar iOS için safari "viewport" bir çözüm değil, bu şekilde sevmiyorum, ama bu javascript kodunu kullandım ve bana yardımcı oldu

 document.addEventListener('touchmove', function(event) {
    event = event.originalEvent || event;
    if(event.scale > 1) {
      event.preventDefault();
    }
  }, false);

user-scalable=0

Bu artık iOS 10'da çalışmıyor. Apple özelliği kaldırdı.

Brüt platform uygulaması yapmadığınız sürece şimdi iOS'ta yakınlaştırma web sitesini devre dışı bırakmanın bir yolu yoktur.

Kafa etiketinize aşağıdakileri eklemeyi deneyin:

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

bunlara ek olarak

<meta name="HandheldFriendly" content="true">

Son olarak, bir stil özelliği olarak veya css dosyanıza webkit tabanlı Tarayıcılar için aşağıdaki metni ekleyin:

html {
    -webkit-text-size-adjust: none
}

Aşağıdaki kodla iOS 12'de çalıştım:

if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
  window.document.addEventListener('touchmove', e => {
    if(e.scale !== 1) {
      e.preventDefault();
    }
  }, {passive: false});
}

İlk if ifadesiyle yalnızca iOS ortamlarında yürütülmesini sağlarım (Android'de yürütülürse kaydırma behivour kırılacaktır). Ayrıca,passive ayarlanmış seçeneğefalse .

Bu IOS 10.3.2'de iyi çalışıyor

    document.addEventListener('touchmove', function(event) {
        event = event.originalEvent || event;
        if (event.scale !== 1) {
           event.preventDefault();
        }
    }, false);

teşekkür ederim @ arthur ve @aleclarson

HTML başlığına aşağıdakileri ekleyerek bu davranışı durdurmayı başardım. Masaüstü tarayıcılar fare tekerleğini kullanırken yakınlaştırmayı desteklediğinden bu, mobil cihazlarda çalışır. Masaüstü tarayıcılarda önemli bir şey değil, ancak bunu dikkate almak önemlidir.

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

ve CSS stil sayfasına aşağıdaki kural

html {
	-webkit-text-size-adjust: none;
	touch-action: manipulation;
}

bazen contentetiketteki diğer direktifler, Apple'ın sayfanızı nasıl düzenleyeceğinize dair en iyi tahmin / buluşsal yöntemini bozabilir, tutam yakınlaştırmayı devre dışı bırakmak için ihtiyacınız olan tek şey.

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

Safari 9.0 ve sonraki sürümlerde, aşağıda gösterildiği gibi görünüm alanı meta etiketinde sığdırmak için daralt özelliğini kullanabilirsiniz

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

Aptalca bir genişlik piksel olarak ölçülen bir sarıcı div vardı. Diğer tarayıcılar bununla başa çıkacak kadar zeki görünüyordu. Genişliği bir yüzde değerine dönüştürdüğümde, Safari mobil cihazında da iyi çalıştı. Çok sinir bozucu.

.page{width: 960px;}

için

.page{width:93.75%}

<div id="divPage" class="page">
</div>

CSS touch-actionözelliğini kullanmak en zarif çözümdür. İOS 13.5'te test edildi.

Sıkıştırma zum hareketlerini devre dışı bırakmak ve yakınlaştırmak için iki kez hafifçe vurmak için:

body {
  touch-action: pan-x pan-y;
}

Uygulamanızın kaydırmaya , yani kaydırmaya da ihtiyacı yoksa , bunu kullanın:

body {
  touch-action: none;
}

WAI WCAG 2.0 AA erişilebilirlik gereksinimlerine uymak için hiçbir zaman yakınlaştırma yakınlaştırmayı devre dışı bırakmamalısınız . (WCAG 2.0: SC 1.4.4 Metin AA seviyesini yeniden boyutlandır). Bununla ilgili daha fazla bilgiyi buradan edinebilirsiniz: Mobil Erişilebilirlik: WCAG 2.0 ve Diğer W3C / WAI Kuralları Mobil Cihazlara Nasıl Uygulanır, 2,2 Yakınlaştırma / Büyütme

Bu bir iphone vb üzerinde çalışıyor olmalıdır.

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