“İlk ölçek = 1.0” da ayarlandığında “genişlik = cihaz genişliği” ni görünüm alanı meta etiketinden kaldırmanın yan etkileri

Yaparken <meta name="viewport">Etiket standart dışı , "fiili baskınlık nedeniyle çoğu mobil tarayıcı tarafından saygı gösterilir."

Bunun gerçek bir web standardı olmamasının bir dezavantajı, ayrıntılı belgeler diğer standartlar kadar mevcut değildir. CSS Çalışma Grubu ben esas yetkili eser olarak kullanıyorum ne nedenle, bunun için bir şartname vardır.

Asıl sorum şu:

Aşağıdaki bildirimler arasındaki algılanan fark ne olurdu?

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

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

Alternatif olarak, şu iki @viewport CSS kurallar arasındaki farklar nelerdir :

/* Translated from <meta name="viewport" content="width=device-width, initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: 100vw;
}

/* Translated from <meta name="viewport" content="initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: extend-to-zoom;
}

Bu @viewportçevirilere nasıl ulaştım:

width=device-width için min-width: extend-to-zoom; max-width: 100vw;

CSS aygıt uyarlaması Modülü Seviye 1 belge devletler:

widthVe heightgörünüm <META>özellikleri çevrilmekte widthve heightayarlama tanımlayıcıları min-width/ min-heightdeğer extend-to-zoomve max-width/ max-heightgörünüm uzunluğu değer.

Ayrıca bir örnek veriyorlar :

Bu <META>öğe:

<meta name="viewport" content="width=500, height=600">

şu dile çevirir:

@viewport {
    width: extend-to-zoom 500px;
    height: extend-to-zoom 600px;
}

widthKestirme tanımlayıcı olarak tarif edilmektedir:

Bu, hem min-widthve öğelerini ayarlamak için bir kısayol tanımlayıcısıdır max-width. Bir <viewport-length>değer hem ayarlayacaktır min-widthve max-widthbu değere. İki <viewport-length>değerleri belirleyecektir min-widthbirinci ve max-widthikinci için.

Yani bunun width: extend-to-zoom 500px;karşılığımin-width: extend-to-zoom; max-width: 500px; .

Bu sadece 100vwparçayı terk ediyor . İçinde bölüm 10.4 , onlar açıklamak:

device-widthve device-heightsırasıyla 100vw ve 100vh'ye çevirin

Böylece nihayet nasıl width=device-widthçevrildiğini görebiliriz min-width: extend-to-zoom; max-width: 100vw;.

initial-scale=1.0 için zoom: 1.0; width: extend-to-zoom;

Bu birebir örnek :

Bu <META>öğe:

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

şu dile çevirir:

@viewport {
    zoom: 1.0;
    width: extend-to-zoom;
}

Burada bulunan diğer soru, neyi tam olarak bir extend-to-zoomdeğeri?

Üzerindeki belgelerin ve çözüm prosedürünün kavranması zordur. Birisi beni bu konuda takdir edilecek başka örneklere yönlendirebilirse.

Yukarıdaki her şeye ek olarak, bazı görünüm alanı yapılandırmalarını test etmek için hızlı bir site - https://romellem.github.io/temp-site/viewport/ - bir araya getirdim .

Yani:

• content = "width = cihaz genişliği, ilk ölçek = 1,0"
• İçerik = "ilk ölçekli = 1.0"

Bu, testte yardımcı olabilir.

Sorduğunuz şeyi incelemeden önce, viewportmeta etiketin neden ilk başta bulunduğunu biraz inceleyelim . İşte topladıklarım.

viewportEtikete neden ihtiyacımız var ?

Görünüm, web içeriğinin görülebildiği bir alandır. Genellikle, oluşturulan sayfa (web içeriği) görünümden daha büyüktür. Sonuç olarak, gizli içeriği görmek için genellikle kaydırma çubuklarını kullanırız (çünkü görünüm her şeyi görüntüleyemez). CSS Aygıt Uyarlama Modülü Seviye 1'den alıntılanmıştır :

Dar görünüm alanı, masaüstü tarayıcılarda iyi görünecek şekilde tasarlanmış belgeler için bir sorundur. Sonuç olarak, mobil tarayıcı satıcıları, görünüm alanı boyutundan farklı ve tipik bir masaüstü tarayıcı penceresininkine yakın olan sabit bir başlangıç ​​içeren blok boyutu kullanırlar. Kaydırma veya yatay kaydırmaya ek olarak, yakınlaştırma genellikle belgeye genel bakış ve belgenin okunması ve etkileşimde bulunulması gereken belirli alanlarına yakınlaştırma arasında geçiş yapmak için kullanılır.

Mobil cihazlarda (ve diğer daha küçük cihazlarda), ilk içeren blok genellikle görünüm penceresinden daha büyüktür. Örneğin, ekran genişliği olan bir mobil aygıtın 640pxbaşlangıçtaki bir bloğu olabilir 980px. Bu durumda, ilk içeren blok 640pxmobil ekrana sığabilmesi için küçültülür . Bu 640pxgenişlik (ekran genişliği), initial-widthtartışmamızla ilgili olacak görünüm penceresine denir .

Peki .... Bu viewportetikete neden ihtiyacımız var ? Günümüzde mobil cihazlar için tasarım yapmamızı sağlayan medya sorgularımız var . Ancak, bu medya sorgusu gerçek görünümün genişliğine bağlıdır . Mobil cihazlarda, kullanıcı aracısı başlangıçtaki görüntü alanı boyutunu otomatik olarak farklı bir sabit olana (genellikle başlangıçtaki görüntü alanı boyutundan daha büyük) ayarlar. Dolayısıyla, bir mobil cihazın görünüm alanının genişliği sabitse, medya sorgularında kullandığımız CSS kuralları yalnızca görünümün genişliği asla değişmediği için yürütülmez. Kullanımı viewportetiketi, biz olabilir kontrol fiili (UA tarafından tarz edildikten sonra) ViewPort'un genişliğini. MDN'den alıntı :

Bununla birlikte, bu mekanizma, medya sorguları kullanan dar ekranlar için optimize edilmiş sayfalar için o kadar iyi değildir - örneğin, sanal görünüm alanı 980 piksel ise, 640 piksel veya 480 piksel veya daha kısa bir hızda başlayan medya sorguları asla kullanılmayacak, duyarlı tasarım teknikleri.

viewportEtiketin yalnızca genişlik değil, gerçek görünümün yüksekliğini de değiştirebileceğini unutmayın

viewport etiketinin width

widthBir de viewportetikete çevrilmiştir max-widthiçinde @viewportkural. widthAs device-widthdeğerini bildirdiğinizde 100%, @viewportkuralda çevrilir . Yüzde değeriinitial-width görünümün görünümüne göre çözümlenir . Yukarıdaki örneği hala kullanıyorsanız, max-widthdeğeri 640px. Bildiğiniz gibi, bu yalnızca max-width. min-widthOtomatik olacak extend-to-zoom.

extend-to-zoom

Sorunuz , zumaya genişletmenin değeri tam olarak neydi ? Topladığım kadarıyla, belirli bir yakınlaştırma düzeyinde görüntüleme alanına sığacak şekilde uzanan görünümü desteklemek için kullanılan değerdir. Başka bir deyişle, belirtilen yakınlaştırma değerine göre değişen bir görüntü alanı boyutu değeridir. Bir örnek? Verilen max-zoomUA stil değeri 5.0ve initial-widtholduğu 320px, <meta name="viewport" content="width=10">bir ilk gerçek genişliği çözecektir 64px. Bu mantıklıdır, çünkü bir cihazda yalnızca 320 piksel varsa ve yalnızca 5xnormal değere yakınlaştırılabiliyorsa , minimum görüntüleme alanı boyutu olur 320px divided by 5, yani bir seferde yalnızca 64 piksel gösterilir ( ve 10pxçünkü bu 32x yakınlaştırma gerektirir!). Bu değer , gerçek görüntüleme alanı genişliğinin belirlenmesinde rol oynayacak olan min-widthve max-widthdeğerlerinin nasıl genişletileceğini (değiştirileceğini) belirlemek için algoritma tarafından kullanılacaktır .

Hepsini bir araya koy

Yani esasen <meta name="viewport" content="width=device-width, initial-scale=1.0">ve arasındaki fark <meta name="viewport" content="initial-scale=1.0">nedir? Sadece algoritmanın ( bu ve bu ) adımlarını tekrarlayın . Önce ikincisini ( widthniteliği olmayan ) yapalım . ( initial-widthGörünüm penceresinin olduğunu varsayacağız 640px.)

• width, set bu sonuçları edilmez max-widthve min-widthvarlık extend-to-zoomiçinde @viewportkural.
• initial-scaleolduğunu 1.0. Bu, zoomdeğerin aynı zamanda1.0
• Hadi çözmekextend-to-zoom . Adımlar:
  1. extend-zoom = MIN(zoom, max-zoom). İşlem MIN, olmayan değere gider auto. İşte, zoomöyle 1.0ve max-zoomöyle auto. Bu araç extend-zoomolduğunu1.0
  2. extend-width = initial-width / extend-zoom. Bu kolay; 640'ı 1'e bölün extend-width.640
  3. Çünkü extend-zoom, olmayan auto, ikinci koşula atlayacağız. max-widthaslında extend-to-zoom, bu max-widthayarlanacaktır anlamına gelir extend-width. Böylece,max-width = 640
  4. min-widthaynı zamanda extend-to-zoom, bu ayarı min-widthyapmak anlamına gelir max-width. Biz olsunmin-width = 640
• Sonra olmayan çözülmesiauto (yani extend-to-zoomiçin değerler) max-widthve min-width. Bir sonraki prosedüre geçebiliriz . Çünkü min-widthveya max-widthdeğil auto, ilk kullanır if, böylece ilk gerçek görünüm ayarlama prosedüründe widthiçin MAX(min-width, MIN(max-width, initial-width))eşittir, MAX(640, MIN(640, 640)). Bu 640, ilk gerçek görünümünüz için çözülürwidth
• İçin taşıma sonraki prosedür . Bu adımda widthdeğil auto. Değer değişmedi ve sonuç widtholarak640px

İlkini yapalım.

• widthayarlandığında, bu sonuçlar max-widtholma 100%( 640pxbizim durumumuzda) ve min-widthvarlık extend-to-zoomiçinde @viewportkural.
• initial-scaleolduğunu 1.0. Bu, zoomdeğerin aynı zamanda1.0
• Hadi çözmekextend-to-zoom . Adımları dikkatlice izlerseniz (neredeyse yukarıdakiyle aynıdır), bir max-widthve 640pxve ile min-widthsonuçlanır 640px.
• Muhtemelen örüntüyü şimdi görebilirsiniz. Gerçek görüntü alanı genişliğini alacağız 640px.

Peki algılanan fark nedir? Aslında hiçbiri . İkisi de aynı şeyi yapıyor. Umarım açıklamam yardımcı olur ;-) Bir şey yanlış giderse, söyle bana.