SORU
5 Temmuz 2012, PERŞEMBE


Tam web sayfası ve engelli görünüm penceresi meta tüm mobil tarayıcılar için etiket zoom

Web sayfamda tüm mobil cihazlarda tam ekran ve yakınlaştırma devre dışı bırakmak istiyorum.

Meta etiketi: ile

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

İPhone/iPad için bunu yapmak mümkün duyuyorum, ama Android cihazlarda web sitesi, 125% için yakınlaştırma.

Etiket kullanırsam

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

Tam tersi bir sonuç alıyorum. O zaman Android üzerinde çalışıyor ama iPad/iPhone çalışmıyor.

CEVAP
4 EYLÜL 2012, Salı


Ne yazık ki her tarayıcı görünüm penceresi meta etiketi kendi uygulaması vardır. Farklı kombinasyonlar farklı tarayıcılarda çalışır.

Android 2.2: görünüm penceresi meta etiketi tüm desteklenen görünmüyor.

Android 2.3.x/3.x: Ayarlayarakuser-scalable=nogörünüm penceresi meta Ölçekleme kendini de etiket devre dışı bırakın. Bu genişlik seçeneğin hiçbir etkisi olması bu yüzden muhtemelen. Tarayıcı içeriği ölçeklemek için izin vermek için ayarlamanız gerekiruser-scalable=Eveto zaman psikolog ya da büyümek değil, dolayısıyla aynı değeri min ve max ölçeği ayarlayabilirsiniz zoom devre dışı bırakmak için. Senin site kadar ilk ölçeği ile oyuncak rahatça sığar.

<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />

Android 4.xAynı kural 2.3 olarak uygulanır.x min ve max ölçekler dışında kullanırsanız artık ve onur duyuyoruzuser-scalable=Evetkullanıcı her zaman zoom ayarı için 'hayır' demek kendi ölçeği dikkate alınmaz, bu sorunu ben bakan şimdi drew bana bu soruyu... Senin gibi olamaz devre dışı bırakmak için zoom ve ölçek aynı anda 4.x.

/Safari (4.iOS x/5.x test): Terazi beklendiği gibi, Ölçekleme devre dışı bırakabilirsiniz çalışmauser-scalable=0(anahtar Evet/Hayır 4'te çalışmıyor.x). iOS/Safari de kavramı yokhedef-densitydpibu hataları önlemek için terk etmelisiniz. Beklenen şekilde yakınlaştırma kapatabilirsiniz beri min ve max ihtiyacın yok. Kullanın sadecegenişlikya da iOS orientation bug içine edeceğiz

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

Krom: İOS, min ve max ölçekler, tıpkı beklendiği gibi çalışmak onur ve kullanarak yakınlaştırma kapatabilirsinizuser-scalable=no.

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

Sonuç: Oldukça basit bazı temel tarayıcı aygıt algılama/sonra içeriği buna göre ayarlamak için bazı JS kullanabilirsiniz. Algılama bu tür hoş karşılanmadığını biliyorum ama bu durumda her satıcı gitti ve kendi yaptığı şey yüzünden neredeyse kaçınılmaz! Bu insanların görüş mücadele yardımcı olur, ve eğer biri Android 4 yakınlaştırma devre dışı bırakılması için bir çözüm vardır umarım.x görüş kullanmadan, lütfen bana bildirin.

[DÜZENLE]

Android 4.x tarayıcı Chromeçoğu ülkede önceden yüklenmiş olduğunu düşünüyorum): kullanıcı zoom olamaz emin olun ve sayfayı tam ekran. Dezavantajı: içeriği sabit bir genişliğe sahip olduğundan emin olun. Daha düşük Android sürümlerinde bu test etmedim. Bunun için örneğe bakın:

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

2 [DEĞİŞTİR]

iOS/Safari 7.1: V7 beri.1, Apple görünüm penceresi meta etiketi minimal-ui adında yeni bir bayrak kullanılmaya başlandı. Tam ekran uygulamalar ile yardımcı olmak için, bu adres çubuğuna gizler ve tam ekran deneyimi için araç çubuğu (Tam Ekran değil ama yakın bir API ve kullanıcı kabul gerektirmez) alt. fair share of bugs as well ve ipad'ler için işe yaramıyor ile birlikte geliyor.

<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0, minimal-ui" />

3 [DEĞİŞTİR]

iOS/Safari 8 Beta 4: Görünüm penceresi meta etiketi minimal-ui EDİT 2 söz şimdi bu sürümde Apple tarafından kaldırıldı. Source - WebKit Notes

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • BetterCoder

    BetterCoder

    17 Aralık 2012
  • Elly Awesome

    Elly Awesome

    15 ŞUBAT 2010
  • Sarah's YouTube Channel

    Sarah's YouT

    27 Temmuz 2009