Viewport meta etiketi hakkında bilmek istediğiniz her şey. Mobil tarayıcılarda düzeni kontrol etmek için viewport meta etiketini kullanma

Tam tanım meta etiketi görüntü alanı ve nitelikleri. Siteyi mobil cihazlara uyarlamak için örnekler, notlar ve öneriler. Ek ve kullanışlı meta etiketlerin yanı sıra: El Dostu, Mobil Optimize Edilmiş Ve apple-mobil-web-app-yetenekli.

• Meta görünüm etiketi
  • görünüm meta etiketi öznitelikleri
• Ek ve faydalı meta etiketler
  • El Dostu meta etiketi
  • Mobil Optimize Edilmiş Meta Etiketi
  • apple-mobile-web-app özellikli meta etiketi
• Önerilen meta etiket grubu

görünüm meta etiketi

meta etiketi görüntü alanı tarayıcıya sayfa boyutlarının nasıl işleneceğini ve sayfanın nasıl ölçekleneceğini söyler. Bu tag mutlaka head bölümüne eklenmelidir.

Not: meta etiketi gönderiyi gör resmi standarda dahil değildir ve spesifikasyonun bir parçasıdır CSS Cihaz Uyarlaması(http://goo.gl/FSTGbn). Ancak bu spesifikasyon nihai hale getirilip evrensel olarak uygulanana kadar meta etiketinin kullanılması önerilir. görüntü alanı tek başına ve stiller ile kombinasyon halinde @viewport uyumluluk amaçları için.

Örnek:

görünüm meta etiketi öznitelikleri

meta etiketi görüntü alanı virgülle (,) ayrılmış aşağıdaki niteliklere sahip olabilir:

Genişlik- görünüm genişliği.

Öznitelik değeri, negatif olmayan bir tam sayıdır. 200 önce 10000 piksel veya sabit cihaz genişliği, sayfanın genişliğini ekran boyutuna göre ayarlar.

Değer ayarlanmazsa varsayılan olarak - mobile Safari = 980px, Opera = 850px, Android WebKit = 800px, IE = 974px olur.

Not: Duyarlı web siteleri için şunun kullanılması önerilir: width=device-with .

yükseklik- görünüm yüksekliği.

Öznitelik değeri, negatif olmayan bir tam sayıdır. 233 önce 10000 piksel veya sabit cihaz yüksekliği ekran boyutuna göre sayfanın yüksekliğini ayarlar.

Not: öznitelik belirtilmişse Genişlik, özniteliği belirtin yükseklik gerekli değil.

ilk ölçek- sayfanın ilk ölçeği.

0.1 önce 1.0 . Anlam 1.0 ölçeği belirler 1:1 , yani "ölçeklendirmeyin".

Not: bazılarında işletim sistemleri (iOS, Windows telefon vesaire.) sayfa genişliği döndürüldüğünde değişmeden kalır. İçeriği yeniden dağıtmak yerine ölçeklenir. Bu nedenle, kullanılması tavsiye edilir: başlangıç ​​ölçeği=1.0.

kullanıcı tarafından ölçeklenebilir- kullanıcı tarafından sayfa ölçeklendirmenin kullanılabilirliği.

Öznitelik değeri bir boole " Evet» (1) - ölçeklenebilir veya « HAYIR» (0) - ölçeklenemez.

Not: " değerinin kullanılması tavsiye edilir. Evet" , dan beri varsayılan olarak ayarlanmıştır kullanıcı tarafından ölçeklenebilir belirtilebilir veya belirtilmeyebilir.

asgari ölçek- minimum görüntü alanı ölçeği.

Özniteliğin değeri, noktalı bir sayıdır. 0.1 önce 1.0 . Mobil cihazlarda Safari tarayıcısı varsayılan 0,25'tir. Anlam 1.0 ölçeği belirler 1:1 , yani "ölçeklendirmeyin".

maksimum ölçek- maksimum görüntü alanı ölçeği.

Özniteliğin değeri, noktalı bir sayıdır. 0.1 önce 1.0 . Varsayılan mobil tarayıcı Safari 1.6'dır. Anlam 1.0 ölçeği belirler 1:1 , yani "ölçeklendirmeyin".

Not: özniteliklerden kaçının kullanıcı tarafından ölçeklenebilir, asgari ölçek Ve maksimum ölçek, Çünkü içeriğin erişilebilirliğini olumsuz etkilerler.

Ek ve faydalı meta etiketler

meta etiketi El Dostu AvantGo gibi bir tarayıcıda bir site sayfasının Palm ve Blackberry'deki mobil cihazlar için optimize edilip edilmediğini belirler. Artık diğer birçok mobil tarayıcı tarafından da tanınmaktadır.

Örnek:

meta etiketi Mobil Optimize Edilmiş(http://goo.gl/ZpLjZz), IE Mobile veya Pocket IE mobil tarayıcılarda görünümün genişliğini ayarlar. Bir özniteliğe benzer Genişlik meta etiketinde görüntü alanı.

Örnek:

meta etiketi apple-mobil-web-app-yetenekli(http://goo.gl/VGDYQC), sayfanın Apple mobil cihazlarıyla ilgili olarak tam ekran modunda çalışmasına izin verir.

Örnek:

Mobil cihazlar için uyarlanmış duyarlı tasarıma sahip siteler için kullandığım meta etiket grubu:

Web içeriğinin görülebildiği pencere alanıdır. Bu genellikle oluşturulan sayfayla aynı boyutta değildir; bu durumda tarayıcı, kullanıcının gezinmesi ve tüm içeriğe erişmesi için kaydırma çubukları sağlar.

Dar ekranlı cihazlar (ör. cep telefonları), sayfaları genellikle ekrandan daha geniş olan sanal bir pencerede veya görünüm alanında işler ve ardından, oluşturulan sonucu küçülterek tamamının aynı anda görülebilmesini sağlar. Kullanıcılar daha sonra sayfanın farklı alanlarını görmek için kaydırabilir ve yakınlaştırabilir. Örneğin, bir mobil ekranın genişliği 640 piksel ise, sayfalar 980 piksellik bir sanal görünümle oluşturulabilir ve ardından 640 piksellik alana sığacak şekilde küçültülür.

Bu, birçok sayfanın mobil cihazlar için optimize edilmemiş olması ve küçük bir görüntü alanı genişliğinde oluşturulduğunda kırılması (veya en azından kötü görünmesi) nedeniyle yapılır. Bu sanal görüntü alanı, mobil cihazlar için optimize edilmemiş sitelerin genel olarak dar ekranlı cihazlarda daha iyi görünmesini sağlamanın bir yoludur.

görünüm meta etiketini girin

Ancak bu mekanizma, medya sorguları kullanan dar ekranlar için optimize edilmiş sayfalar için pek iyi değildir - örneğin sanal görüntü alanı 980 piksel ise, 640 piksel veya 480 piksel veya daha düşük hızlarda devreye giren medya sorguları asla kullanılmaz, bu da bu tür sorguların etkinliğini sınırlar. duyarlı tasarım teknikleri.

Bu sorunu azaltmak için Apple, web geliştiricilerinin görünümün boyutunu ve ölçeğini kontrol etmesine izin vermek için Safari iOS'ta "görüntü alanı meta etiketini" tanıttı. Herhangi bir web standardının parçası olmamasına rağmen, artık diğer birçok mobil tarayıcı bu etiketi destekliyor. Apple" web geliştiricilerinin bu etiketi nasıl kullanabileceklerini açıklayan belgeler iyi bir iş çıkarıyor, ancak bunu Fennec'te tam olarak nasıl uygulayacağımızı bulmak için biraz dedektiflik çalışması yapmamız gerekti. Örneğin, Safari'nin belgeleri, içeriğin "virgülle ayrılmış bir liste" olduğunu söylüyor, ancak mevcut tarayıcılar ve web sayfaları ayırıcı olarak virgül, noktalı virgül ve boşluk karışımını kullanıyor.

Quirksmode.org adresindeki A Tale of Two Viewports'ta farklı mobil tarayıcılardaki görüntü alanları hakkında daha fazla bilgi edinin.

Görünüm alanı temelleri

Mobil cihazlar için optimize edilmiş tipik bir site aşağıdakine benzer bir şey içerir:

Genişlik özelliği, görünümün boyutunu kontrol eder. Genişlik=600 gibi belirli bir piksel sayısına veya %100 ölçeğinde CSS piksellerinde ekranın genişliği olan device-with özel değerine ayarlanabilir. (İlgili yükseklik ve cihaz yüksekliği değerleri vardır; bunlar, görünüm alanı yüksekliğine göre boyut veya konum değiştiren öğelere sahip sayfalar için yararlı olabilir.)

Initial-scale özelliği, sayfa ilk yüklendiğinde yakınlaştırma seviyesini kontrol eder. maximum-scale , minimum-scale ve user-scalable özellikleri, kullanıcıların sayfayı yakınlaştırıp uzaklaştırmasına nasıl izin verileceğini denetler.

Piksel piksel değildir

Son yıllarda ekran çözünürlükleri, tek tek pikselleri insan gözüyle ayırt etmenin zor olduğu boyuta yükseldi. Örneğin, yeni akıllı telefonlar genellikle 1920-1080 pikselden (~400 dpi) yüksek çözünürlüklü 5 inç ekranlara sahiptir. Bu nedenle, birçok tarayıcı, her bir CSS "piksel"i için birden çok donanım pikselini çevirerek sayfalarını daha küçük bir fiziksel boyutta görüntüleyebilir. Başlangıçta bu, dokunmatik olarak optimize edilmiş birçok web sitesinde kullanılabilirlik ve okunabilirlik sorunlarına neden oldu. Peter-Paul Koch bu sorun hakkında A piksel piksel değildir'de yazdı.

Yüksek dpi ekranlarda, başlangıç ​​ölçeği=1 olan sayfalar, tarayıcılar tarafından etkili bir şekilde yakınlaştırılır. Metinleri düzgün ve net olacak, ancak bit eşlem görüntüleri muhtemelen tam ekran çözünürlüğünden yararlanamayacak. Bu ekranlarda daha keskin görüntüler elde etmek için web geliştiricileri, görüntüleri (veya tüm mizanpajları) son boyutlarından daha yüksek bir ölçekte tasarlamak ve ardından CSS veya görünüm alanı özelliklerini kullanarak bunları küçültmek isteyebilir. Bu, şunları söyleyen CSS 2.1 belirtimi ile tutarlıdır:

Çıkış cihazının piksel yoğunluğu tipik bir bilgisayar ekranınınkinden çok farklıysa, kullanıcı aracısı piksel değerlerini yeniden ölçeklendirmelidir. Piksel biriminin, referans piksele en iyi yaklaşan cihaz piksellerinin tam sayısını ifade etmesi önerilir. Referans pikselin, 96 dpi piksel yoğunluğuna ve okuyucudan bir kol mesafesi uzaklığına sahip bir cihazdaki bir pikselin görsel açısı olması önerilir.

Web geliştiricileri için bu, bir sayfanın boyutunun gerçek piksel sayısından çok daha küçük olduğu ve tarayıcıların düzenlerini ve resimlerini buna göre boyutlandırabileceği anlamına gelir. Ancak tüm mobil cihazların aynı genişlikte olmadığını unutmayın; sayfalarınızın çok çeşitli ekran boyutları ve yönlerinde iyi çalıştığından emin olmalısınız.

Varsayılan piksel oranı, ekran yoğunluğuna bağlıdır. Yoğunluğu 200 dpi'den az olan bir ekranda oran 1,0'dır. 200 ile 300dpi arasında yoğunluğa sahip ekranlarda oran 1,5'tir. 300dpi'nin üzerinde yoğunluğa sahip ekranlar için oran, tamsayı tabanıdır ( yoğunluk/150dpi). Varsayılan oranın yalnızca görüntü alanı ölçeği 1'e eşit olduğunda doğru olduğunu unutmayın. Aksi takdirde, CSS pikselleri ile cihaz pikselleri arasındaki ilişki geçerli yakınlaştırma düzeyine bağlıdır.

Görünüm alanı genişliği ve ekran genişliği

Siteler, görünümlerini belirli bir boyuta ayarlayabilir. Örneğin, "genişlik=320, ilk ölçek=1" tanımı, portre modunda küçük bir telefon ekranına tam olarak sığdırmak için kullanılabilir. Bu, tarayıcı bir sayfayı daha büyük boyutta oluşturmadığında sorunlara neden olabilir. Bunu düzeltmek için tarayıcılar, ekranı istenen ölçekte doldurmak için gerekirse görüntü alanı genişliğini genişletir. Bu, özellikle büyük ekranlı cihazlarda kullanışlıdır. iPad (Allen Pike'ın iPad siteleri için bir görünüm alanı seçmesinin iyi bir açıklaması var web için geliştiriciler.)

Bir başlangıç ​​veya maksimum ölçeği ayarlayan sayfalar için bu, genişlik özelliğinin aslında bir minimum görünüm genişliği. Örneğin, düzeninizin en az 500 piksel genişliğe ihtiyacı varsa, aşağıdaki işaretlemeyi kullanabilirsiniz. Ekran 500 pikselden daha geniş olduğunda, tarayıcı ekranı sığdırmak için (yakınlaştırmak yerine) görünümü genişletir:

Mevcut olan diğer seçenekler minimum ölçek, maksimum ölçek ve kullanıcı tarafından ölçeklenebilirdir. Bu özellikler, ilk ölçek ve genişliğin yanı sıra yakınlaştırma seviyesindeki sınırlayıcı değişiklikleri etkiler.

Tüm mobil tarayıcılar yön değişikliklerini aynı şekilde işlemez. Örneğin, Mobile Safari, dikeyden yataya geçiş yaparken, sayfayı orijinal olarak yatay olarak yüklenmiş gibi yerleştirmek yerine genellikle yalnızca sayfayı yakınlaştırır. Web geliştiricileri, iPhone'da yönleri değiştirirken ölçek ayarlarının tutarlı kalmasını istiyorsa, bu yakınlaştırmayı önlemek için maksimum ölçek değeri eklemeleri gerekir; bu, kullanıcıların yakınlaştırma yapmasını engelleyen bazen istenmeyen bir yan etkiye sahiptir:

İlk ölçek ve minimum ölçek değerlerini 0,86 olarak ayarlayarak birçok akıllı telefon tarafından uygulanan küçük yakınlaştırmayı bastırın. Sonuç olarak, yatay kaydırma herhangi bir yönde bastırılır ve kullanıcı isterse yakınlaştırabilir.

Mobil ve tablet cihazlar için ortak görüntü alanı boyutları

Hangi mobil ve tablet cihazların hangi görünüm genişliğine sahip olduğunu öğrenmek istiyorsanız, kapsamlı bir . Bu, dikey ve yatay yönde görüntü alanı genişliği, fiziksel ekran boyutu, işletim sistemi ve cihazın piksel yoğunluğu gibi bilgiler verir.

Özellikler

En popüler mobil tarayıcılar tarafından desteklendiğinden ve binlerce web sitesi tarafından kullanıldığından, viewport meta etiketine yönelik açık bir talep vardır. gerçek olsa iyi olur için standart görünüm özelliklerini kontrol etmek için web sayfaları. Standardizasyon süreci ilerledikçe, Mozilla olarak biz de her türlü değişiklikten haberdar olmak için çalışacağız.

Duyarlı şablonlarla çalışırken viewport meta etiketini kullandığınıza şüphe yok. Ancak, görüntü alanı meta etiketinin yanıt vermeyen şablonlar için de yararlı olabileceğini biliyor muydunuz? Proje şablonunuzu duyarlı şablona dönüştürmek için zamanınız yoksa, tasarımınızın görünümünü iyileştirmek için viewport meta etiketini nasıl kullanacağınıza ilişkin bu öğreticiyi okumalısınız. mobil cihazlar.

Viewport meta etiketinin yaygın kullanımı

Tipik olarak, görüntü alanı meta etiketi, mobil cihazlarda görünümün genişliğini ve ilk ölçeğini ayarlamak için kullanılır. İşte bir örnek.

Yanıt vermeyen bir şablonda görüntü alanı meta etiketini kullanma

Varsayılan olarak, iPhone'daki görüntü alanı genişliği 980 piksel olarak ayarlanmıştır. Ancak tasarımınız bu aralığa pek uymayabilir. Değer, şablon için çok büyük veya çok küçük olabilir. Aşağıda iki örnek var. mobil cihazlarda yanıt vermeyen bir şablonun görünümünü iyileştirmek için görünüm alanı meta etiketini kullanan.

Örnek

Themify web sitesini bir mobil cihazdan görüntüleyin.

Sol ekran görüntüsü gösterir dış görünüş viewport meta etiketini kullanmadan site. Sayfanın ekranın her iki tarafına dokunduğunu fark edebilirsiniz. 1024px genişliğinde bir viewport meta etiketi eklerseniz, o zaman solda ve sağda bir boşluk olacaktır.

Başka bir örnek

Tasarımınız çok darsa, aynı zamanda beceriksiz görünecektir. Diyelim ki konteynerin genişliği 700px ve uyum sağlamıyor. Bu durumda, görünüm soldaki aşağıdaki ekran görüntüsü gibi olacaktır - solda geniş beyaz bir şerit.

Görünüm alanı genişliğini 720 piksel olarak ayarlayarak sorun kolayca çözülebilir. Tasarımın genişliği değişmez, ancak mobil cihaz bunu 720 piksele ölçeklendirir.

Genel hata

Yaygın bir hata, geliştiricilerin genellikle yanıt vermeyen şablonlar için ilk ölçek=1'i kullanmasıdır. Bu ayar, ölçeklendirme olmadan sayfanın %100'ünü oluşturur. Tasarım yanıt vermiyorsa, kullanıcının tüm sayfayı görmek için ya çok kaydırma yapması ya da yakınlaştırmayı manuel olarak ayarlaması gerekir. En kötü durum, user-scalable=no veya maximum-scale=1 ile startup-scale=1 kombinasyonudur. Böylece site üzerinde ölçeklendirme imkanı devre dışı bırakılır. Ve ölçeklendirme olmadan tüm sayfayı görmenin bir yolu yoktur. Şablonunuz yanıt vermiyorsa, ölçeklendirmeyi devre dışı bırakmayın ve ilk ölçeği sıfırlamayın!

Cihazımızda tarayıcı penceresini özelleştirmek istediğimizde genellikle HTML etiketi . Bununla birlikte, garip bir şekilde, meta etiketi "normatif" değil - resmi W3C standardında değil.

Viewport meta etiketi ilk olarak Apple tarafından iPhone'da ve daha sonra diğer tarayıcı satıcıları tarafından tanıtıldı. Bugün, tabletler ve akıllı telefonlar için iOS, Android ve diğer platformların popülaritesi nedeniyle yaygın olarak kullanılmaktadır.

Viewport meta etiketi tamamen işaretlemeyi özelleştirmek için olduğundan, haklı olarak CSS'ye ait olduğunu söyleyebiliriz. Bu nedenle W3C, pencere kontrolünü HTML'den CSS'ye taşıyan yeni bir uyarlama yöntemini standartlaştırmaya çalışıyor.

@viewport css kuralı

Yeni @viewport kuralıyla, bu tür bir kontrolün tamamen CSS aracılığıyla olması dışında, meta etiketiyle aynı pencere kontrolüne sahibiz. Meta etikette olduğu gibi, tarayıcı penceresinin genişliğini cihazdan bağımsız cihaz genişliğini kullanarak ayarlamanız önerilir:

@viewport(
genişlik:cihaz genişliği;
}

Bugün @viewport, programcılar tarafından IE10'da "snap modu" için kullanılıyor - Windows işlevi 8, çoklu pencere modunda çalışmanıza izin verir. İşin garibi, pencere boyutu 400 pikselden küçükse IE10 meta etiketi yok sayar, bu da bu meta etiketi kullanan sitelerin bu tür küçük pencereler için optimizasyon yapmasını imkansız hale getirir. Bunu düzeltmek için, programcılar yukarıda belirtilen device-width parametresini kullanmalı veya medya sorgusunda @viewport kuralını tanımlamalıdır.

Medya sorgularında @viewport kullanma

Medya sorgularında @viewport kullanabiliriz. Örneğin, aşağıdaki ortam sorgusu, genişliği 400 pikselden az olan bir pencerenin düzenini ayarlamak için kullanılır (örneğin, çoklu pencere modu IE10'da) 320 piksel genişliğe kadar.

@media ekranı ve (maksimum genişlik: 400 piksel) (
@-ms-viewport (genişlik: 320px;)
...
}

İÇİNDE bu örnek, cihaz 640 ila 1024 piksellik bir çözünürlük aralığına ayarlanmışsa, @viewport kuralı pencereyi 640 piksele ölçeklendirir.

@media ekranı ve (min-width: 640px) ve (max-width: 1024px) (
@viewport (genişlik: 640 piksel; )
...
}

Yeni @viewport tutamaçları

Yakınlaştırma ve yakınlaştırma işlevini kontrol edebilmemize rağmen, bazı görüntü alanı özellikleri - veya artık "tutma yerleri" olarak adlandırıldıkları şekliyle - değişti.

yakınlaştır

Yakınlaştırma tutamacı, meta etiketindeki ilk ölçeğin eşdeğeridir. Minimum ölçek ve maksimum ölçeğin yanı sıra, maksimum yakınlaştırma ve minimum yakınlaştırma için tanımlayıcılar vardır:

@viewport(
genişlik:cihaz genişliği;
yakınlaştırma: 2;
}

kullanıcı yakınlaştırma

Kullanıcı yakınlaştırma tanımlayıcısı, kullanıcı tarafından ölçeklenebilir parametreye eşdeğerdir

@viewport(
genişlik:cihaz genişliği;
kullanıcı yakınlaştırma: sabit;
}

tarayıcı desteği

Bugün itibariyle, @viewport css kuralı yalnızca Opera ve IE10 tarafından desteklenmektedir. Görünüşe göre Chrome ve diğer tarayıcılar da yakında uygulayacak. bu meta etiketinin yakında yeni resmi web standardı olması bekleniyor.

Şimdilik, @viewport kuralına bir satıcı öneki eklemeniz gerekiyor:

@-ms-görüntü noktası(
genişlik:cihaz genişliği;
}
@-o-görüntü alanı(
genişlik:cihaz genişliği;
}
@viewport(
genişlik:cihaz genişliği;
}

Tabii yine de viewport meta etiketini html sayfasına dahil etmemiz gerekiyor, çünkü yakın zamanda hiçbir yere gitmiyor. Ancak artık geleceğe bakmak o kadar da korkutucu değil - @viewport kuralının eklenmesi, sitelerimizi ve uygulamalarımızı değişime hazır hale getiriyor

Genel hata

Yaygın bir hata, geliştiricilerin genellikle yanıt vermeyen şablonlar için ilk ölçek=1'i kullanmasıdır. Bu ayar, ölçeklendirme olmadan sayfanın %100'ünü oluşturur. Tasarım yanıt vermiyorsa, kullanıcının tüm sayfayı görmek için ya çok kaydırma yapması ya da yakınlaştırmayı manuel olarak ayarlaması gerekir. En kötü durum, kullanıcı tarafından ölçeklenebilir=hayır veya maksimum ölçek=1 ile başlangıç ​​ölçeği=1'in birleşimidir. Böylece site üzerinde ölçeklendirme imkanı devre dışı bırakılır. Ve ölçeklendirme olmadan tüm sayfayı görmenin bir yolu yoktur. Şablonunuz yanıt vermiyorsa, ölçeklendirmeyi devre dışı bırakmayın ve ilk ölçeği sıfırlamayın!

Çoğu zaman insanlar genişlik (genişlik) ve cihaz genişliği (cihaz genişliği) arasındaki farkı anlamazlar (ve ayrıca min (min-cihaz-genişliği) ve maksimum cihaz genişliğine (maks-cihaz genişliği) sahip örnekler vardır) , CSS ortam sorgularını kullanarak. Bu yanlış anlama, kötü kod yazılmasına ve geliştiricinin çok daha fazla çalışmasına neden olur. Bu soru SitePoint forumlarında çokça karşımıza çıkıyor, bu yüzden her şeyi daha detaylı açıklamanın zamanı geldi. Bu makale, bu sorunu ele alacak ve duyarlı siteler oluştururken hangi seçeneğin kullanılacağına daha yakından bakacaktır.

Temel tanımlar

"Genişlik" ve "cihaz genişliği"ne dayalı medya sorgularından bahsederken ne demek istediğimizi tanımlayalım. Aşağıdaki alıntılar, medya sorgularıyla ilgili MDN makalesinden alınmıştır ve bu "genişlik" tanımına sahiptir:

"genişlik" ortam özelliği, çıktı aygıtının işlenen yüzeyinin genişliğini tanımlar (örneğin, bir yazıcıda belge penceresinin genişliği veya sayfa penceresinin genişliği)

MDN "cihaz genişliğini" şu şekilde tanımlar:

Çıktı aygıtının genişliğini tanımlar (yalnızca belge penceresi gibi görüntüleme alanını değil, tam ekran veya sayfa anlamına gelir)

Peki bu gerçekten ne anlama geliyor? Basit kelimelerle, "genişlik" ve "cihaz genişliği", tamamen farklı bir kavram olabilecek görünümün tüm genişliğini değil, cihazın genişliğini ifade eder. Cihazın genişliğinden bağımsız olarak, ilgilenmeniz gereken tek şey görünümün genişliğidir.

Bununla birlikte, genişlik ve cihaz genişliği arasındaki temel fark, cihaz genişliğinin her zaman belirli bir cihazın görüntü alanıyla eşleşmemesidir.

Çoğu tablet ve mobil cihazda her zaman 1 CSS pikseli başına 1 cihaz pikseli bulunmaz. Örneğin, iPhone 4'ün varsayılan olarak 640x960 ekran görüntüleme alanına sahip olduğunu bilmelisiniz. Bu, bu örnekte iPhone4'ün aygıt genişliğinin 320x480 olduğu anlamına gelir. Gerçek şu ki Apple, her sitenin duyarlı olacak şekilde tasarlanmadığını anlıyor ve sitenin masaüstü sürümünü görüntülemek için yaklaşık 980 piksellik bir genişlik sağlayarak herkesi iyi hissettirmeye çalışıyor. Bu, görünüm alanı meta etiketi yoksa, iPhone4 siteyi alır ve 320 piksel geniş ekrana sıkıştırırken siteyi 980 piksel genişliğindeymiş gibi işler ve sitenin kullanıcının bakış açısından daha küçük görünmesine neden olur.

Başlamak

Başlangıç ​​olarak, yanıt veren ve medya sorgusu güdümlü her şeyde olduğu gibi, meta görüntü alanı etiketinin sitenizin bir bölümüne yerleştirilmesi gerekir. Temel standart sürüm aşağıda listelenmiştir.

Bu snippet sayfamızda göründüğünde, sayfayı farklı cihazlarda görüntülersek, farklı medya sorguları tetiklenir. Bu olmadan, belirli bir cihazda bir sayfa görüntülenirken, sayfa, sayfanın daha küçük bir versiyonu olarak görüntülenecektir; cihaz tüm siteyi 320px geniş ekrana sığdırmaya çalışacaktır. Ve bu sizin veya kullanıcılarınız için iyi değil! Kullanıcılar içeriği görmek için bir siteyi yakınlaştırmayı sevmezler ve kesinlikle ileri geri kaydırmak istemezler.

Örneğin, varsayılan görüntü alanı genişliği 980 piksel olan iPhone 4'ü ele alalım. Meta etiketi olmadan medya sorgularını kullanma girişimleriniz başarısız olur ve cihaz varsayılan görünüme düzgün şekilde erişemez. Çoğu medya sorgusu 500px veya daha azını hedefler. Bu genellikle basit bir maksimum genişlikte medya sorgusu ile yapılır. Meta etiketi olmadan, iPhone 4 sitenin 980 piksel genişliğindeki sürümünü oluşturmaya devam edeceğinden, bu isteğin etkisini elde edemezsiniz. Aşağıdaki örneğe bakalım:

Gövde ( arka plan: beyaz; ) @medya ekranı ve (min-genişlik: 980px) /* Masaüstü */ ( gövde ( arka plan: kırmızı; ) ) @medya ekranı ve (maks-genişlik: 979px) /* Tablet */ ( gövde ( arka plan: mavi; ) ) @media ekranı ve (maksimum genişlik: 500 piksel) /* Mobil */ ( gövde ( arka plan: yeşil; ) )

Aşağıda iki ekran görüntüsü var. iPhone 4. Her iki sayfada da yukarıdaki CSS var, ancak biri meta görünüm etiketi kullanıyor, diğeri kullanmıyor.

Yukarıda gösterilen sayfa bir meta etiket içermez ve sonuç olarak, arka plan kırmızı olarak görüntülenir ve 500 piksellik bir mobil medya sorgusu kullanmak yerine standart 980 piksellik geniş bir görünümü taklit eder.

Bu durumda, meta etiketi yerindedir ve iOS, sayfayı istediğimiz gibi doğru bir şekilde oluşturur: 320 piksel genişliğe dayalıdır ve medya sorgularımızın beklediğimiz şekilde çalışmasına izin verir.

Neden cihaz genişliğini seçmelisiniz?

Açıkçası, bu makalenin başlığı başlangıçta cihaz genişliğinin kullanılmamasını ima ediyor. Ancak, cihaz genişliğinin yeri vardır. Belirli cihazlar için bir site oluşturuyorsanız, o zaman evet - cihaz genişliğini kullanmalısınız.

CSS ve RWD açısından, iyi bir site aslında "cihazdan bağımsız" olan ve her bir cihazın genişliğini değiştirmeye çalışmayan sitedir. Bireysel hedefleme kontrol noktaları farklı cihaz "türleri" için (örn. tabletler veya cep telefonları), içeriğin belirli bir görünüm alanı genişliğinde nasıl görüntülendiğine odaklanılarak ve ardından medya sorguları buna göre değiştirilerek elde edilir. Dolayısıyla kesme noktalarını belirleyen cihaz değil, hem sizin hem de kullanıcıların bakış açısından en iyi sonuçlara yol açabilecek olan düzen ve içeriktir.

Bu kadar çok insanın duyarlı tasarımlar oluşturmakta sorun yaşamasının ve bunun zor olduğundan şikayet etmesinin nedeni bu olabilir. Ama altında tasarlamaya çalışırlarsa bireysel cihazlar, kaybedilen bir savaşa giriyorlar: dikkate alınması gereken (her şeyi kapsayan) cihaz sayısı çok fazla ve her şeyi kötü koda indirgiyor. Ayrıca, cihaz genişliğini kullanmaya karar verirseniz, yönlendirme için (dikey veya yatay) ayrı kurallar belirlemeniz gerektiğini de belirtmekte fayda var: Bir cihazın genişliği, yalnızca cihazı yana çevirdiğiniz için değişmez. Bu daha fazla kod gerektirir, bu da daha fazla baş ağrısı anlamına gelir.

Ancak, başka bir olası seçeneğe bakalım.

Peki ya "genişlik"?

Birçok deneyimli geliştirici gibi, olası tüm ekran boyutlarında beklendiği gibi davranan, tamamen duyarlı bir sayfanın en basit ve en uygun olduğu kanısındayım. karlı yol tüm cihazlar için en verimli düzeni elde edin.

Tamamen duyarlı ve akıcı bir sayfa oluşturmak için bir geliştiricinin tek yapması gereken, tüm görünüm pencerelerine saygı gösterilmesini ve sayfanın içerik ve tasarıma uyacak şekilde gerektiği gibi yeniden yapılandırılmasını ve yeniden boyutlandırılmasını sağlamasıdır.

Tamamen duyarlı bir sayfa için ihtiyacınız olan tek şey, esnek bir site ve standart mobil, tablet, masaüstü + görüntü alanı aralığını hedefleyen bazı iyi düşünülmüş medya sorgularıdır. En doğru olan ve gerekli tüm görünüm alanlarını kapsayan Vakfın Medya Sorgularını kullanmayı tercih ediyorum.

Tabii ki, geliştirmedeki her şey gibi, yalnızca genişlik tabanlı sorguları kullanmak tüm düzen sorunlarının çözümü değildir. Bu, çeşitli hataları ve ekran tuhaflıklarını aramak için mobil cihazlarda test yapmak için oldukça gereklidir. Ancak farklı mobil cihazlarda işlerin nasıl görüneceğini görebilmek, tarayıcı pencerenizi yeniden boyutlandırmak kadar kolaydır.

Test için Responsive Web Design Tester Chrome uzantısını kullanıyorum. Belirli bir cihazı seçmenize izin verir. Cihaz boyutunu ve sayfanızın o cihazda nasıl görüneceğini göreceksiniz.

Bahsetmek istediğim bir başka küçük fayda da, genişliğe dayalı sorgular kullanmanın, gelecekteki cihazların siteyi tam olarak oluşturmasını sağlamasıdır. Belirli bir cihaz yerine daha küresel bir şeyi - toplam görüntü alanı boyutunu - hedeflediğiniz için bu oldukça ileri görüşlü bir yaklaşımdır.

Nihayet

Hala medya sorgularında cihaz genişliğini kullanmayı planlıyor musunuz? Argümanlar yeterince inandırıcı değil mi? Normal "genişlik" ve cihaz görünümünün kullanılması, duyarlı tasarımı basitleştirir ve sonuçta neredeyse her zaman kullanmak için en iyi seçenektir.