Duyarlı tasarımdaki temel kavramlardan biri, görünüm boyutunun değişmesidir. Bunun nedeni, mobil görüntü alanlarının masaüstü görüntülerinden büyük ölçüde farklılık göstermesidir. Görünüm boyutunu kontrol etmek için geleneksel olarak viewport meta etiketini kullanırız.
Bununla birlikte, görüntülü reklam meta etiketi, sonsuza kadarki en kötü tarayıcı gelişmeleri gibi, W3C geçerli değil. Başlangıçta Apple tarafından Safari'de tanıtıldı ve o zamandan beri diğer tarayıcılar tarafından kabul edildi. Bu tutarsız bir uygulama ile sonuçlanır.
Mutlu bir şekilde, W3C, @viewport CSS kuralını tanıtarak bir kez daha kurtarmamıza neden oldu.
Eski meta etiket yaklaşımını kullanarak, bu şekilde tarayıcıya viewport'un hangi boyutta görünmesi gerektiğini söyleyebiliriz:
Geçersiz olmanın dışında, viewport talimatı veriler değil, sunum. Bu nedenle, verilerimize ve sunum ayrımı ilkelerine bağlı kalarak, viewport talimatının HTML değil CSS'de olması gerekir.
CSS'deki W3C çözümü şu şekildedir:
@viewport {width: device-width;}Veya dönüşümlü olarak, görünümünüzü aşağıdaki gibi bir sayıyla ayarlayabilirsiniz:
@viewport {width: 640px;}@View sorguları ile birlikte 960px'e küçültmek için 960'dan büyük herhangi bir görüntü alanını zorlamak için @viewport kuralını kullanabilirsiniz:
@media screen and (min-width: 960px){@viewport {width: 960px;}}@Viewport kuralı ayrıca bir sayfaya varsayılan olarak yakınlaştırmamıza ve hatta maksimum yakınlaştırmayı ayarlamamıza olanak tanır:
@viewport {width: 960px;zoom: 1;max-zoom: 3;}Kullanıcı yakınlaştırma özelliğini sabit olarak ayarlayarak yakınlaştırmayı tamamen engellemek mümkündür. Ancak, özellikle akıllı telefonlarda yakınlaştırma, erişilebilirlik için gereklidir ve bu özelliği kullanmanızı tavsiye ederim.
Bir daha çok kullanışlı özellik, web sayfamızı manzara veya portre moduna kilitlememize olanak tanır:
@viewport {orientation: landscape;}İşte kötü haber: Şu anda bu kural sadece Internet Explorer 10 ve Opera tarafından destekleniyor ve sırasıyla -ms- ve -o- tarayıcı öneklerini gerektiriyor.
En azından söylemek hayal kırıklığı yaratıyor olsa da, çoğu tarayıcıda görüntüleyici işlevinin zaten mevcut olması gerçeği, bunun almanın basit bir kural olduğu anlamına gelmelidir. Umarım gecede tanıttığı şeyleri çok kısa zamanda ortaya çıkarmaya başlarız.
Standartlara uyumu önemsiyor musun? W3C, web'deki ilerlemeye yardımcı oluyor mu? Yorumlarda bize bildirin.
Öne çıkan görsel / küçük resim, pencere resmi LostBob tarafından Fotoğraflar