Sığdırmak için küçült görünüm penceresi meta özelliği ne yapar?

143

Bunun için doküman bulmakta sorun yaşıyorum. Safari'ye özgü mü?

İOS 9'da ( burada ) yakın zamanda bir hata oluştu ; bu çözüm shrink-to-fit=no, viewport meta'ya ekleniyor .

Bu kod ne işe yarar?

html  safari  webkit  ios9  viewport 
— 755
kaynak

Yanıtlar:

193

Safari 9.0'da tanıtılan, en azından yazma sırasında Safari'ye özgüdür. "Safari'deki yenilikler?" 9.0 Safari belgeleri :

Viewport Değişiklikleri

Viewport meta etiketlerini kullanmak "width=device-width", sayfanın görünüm alanı sınırlarını aşan içeriğe sığacak şekilde ölçeklendirilmesine neden olur. "shrink-to-fit=no"Aşağıda gösterildiği gibi meta etiketinize ekleyerek bu davranışı geçersiz kılabilirsiniz . Eklenen değer, sayfanın görünüm penceresine sığacak şekilde ölçeklenmesini önleyecektir.

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

Kısacası, bunu viewport meta etiketine eklemek Safari 9.0 öncesi davranışını geri yükler.

Misal

Aşağıda, iki yapılandırmada sayfayı yükledikten sonra farkı gösteren, çalışılmış görsel bir örnek verilmiştir.

Kırmızı bölüm görünüm penceresinin genişliğidir ve mavi bölüm ilk görünüm penceresinin dışında konumlandırılmıştır (örn. left: 100vw). İlk örnekte, sayfanın shrink-to-fit=noatlandığında (böylece görünüm dışı içeriği göstererek) nasıl sığdıracağını ve sonraki örnekte mavi içeriğin ekran dışında kaldığını unutmayın.

Bu örneğin kodu https://codepen.io/davidjb/pen/ENGqpv adresinde bulunabilir .

Sığdırmak için küçültme belirtilmemiş

Sığdırmak için küçültme olmadan = hayır

Sığdırmak için daraltma = hayır

Sığdırmak için daraltma = hayır

— davidjb
kaynak
2
Üzgünüm, ama hala bu kodun ne yaptığını anlamıyorum. Farklı bir şekilde açıklayabilir misiniz? Teşekkürler!
— Daniel Springer
3
@Dani Varsayılan olarak, Safari, görünüm penceresinden taşan içeriğe uyacak şekilde sayfayı uzaklaştırır (ilk örnek mavi alanı görünür olarak gösterir; taşan). Belirlenmesi shrink-to-fit=nobu davranışı önler, yakınlaştırma düzeyini tek başına bırakır ve taşan içeriği ekran dışında bırakır. IDevice (veya iOS Simulator) üzerinde Codepen örneğini deneyin ve ayarı değiştirmeyi deneyin. Belki de değişimin etkileşimli olarak görülmesi yardımcı olacaktır.
— davidjb
2
Ah, anlıyorum. Ama neden birisi içeriğinin bir kısmının daha küçük ekranlarda gizlenmesini istesin ki?
— Daniel Springer
7
@Dani Çeşitli nedenler, ancak hızlı örnekler, içeriği görünüm penceresinin dışına yerleştiren kaydırıcılar / karuseller veya aksi takdirde taşan ve sayfanın geri kalanının varsayılan değerle küçülmesine neden olan büyük yanıt vermeyen içerik (ör. Resimler / tablolar) shrink-to-fitdavranışı. İle shrink-to-fit=no, sayfa beklenen boyutta kalır ve içeriğin görünüm penceresinden taşmasına izin verir. Bir kullanıcı taşma içeriğini görmek için hala (genellikle) kayabilir veya uzaklaştırabilir, ancak ilk görünüm alanı cihaz boyutuyla eşleşir.
— davidjb
2
@davidjb Bunun en son iOS 11 ile düzeltildiğini düşünüyorum. Bu hatayı yeniden oluşturamıyorum.
— Zeel Shah
12

İOS kullanımına ilişkin istatistikler olarak, iOS 9.0-9.2.x kullanımının şu anda% 0.17 olduğunu göstermektedir. Bu sayılar gerçekten bu sürümlerin küresel kullanımını gösteriyorsa, görünüm penceresinin meta etiketinizden sığdırmak üzere küçültmenin kaldırılması daha da olasıdır.

9.2.x'den sonra IOS tarayıcısında bu etiket onayını kaldırın.

Bu sayfayı kontrol edebilirsiniz https://www.scottohara.me/blog/2018/12/11/shrink-to-fit.html

— GGGin
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.