Web Sitelerinin Görünümünü Cihaza Göre Yapılandırma

Görünüm, bir web sayfasının mobil cihazda nasıl görüntüleneceğini denetler. Görünüm olmadan, mobil cihazlar sayfayı tipik bir masaüstü ekranı genişliğinde, ekrana sığacak şekilde ölçeklenmiş olarak görüntüler. Bir görünüm ayarlamak, sayfanın farklı cihazlarda genişliği ve ölçeklenmesi konusunda denetim olanağı verir.

Sol: Meta görünümü olmayan bir sayfa.

Sağ: Cihaz genişliğiyle eşleşen görünüme sahip bir sayfa.

Öneriler

Mobil cihazlarda iyi şekilde görüntülenecek biçimde optimize edilmiş sayfaların doküman başlığında width=device-width, initial-scale=1 ifadesini içeren bir meta görünüm olmalıdır.

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

Mobil Cihazlarda Masaüstü Sayfaları

Bir sayfada görünüm belirtilmediği zaman, mobil tarayıcılar o sayfayı 800-1024 CSS pikseli arasında bir yedek genişlikaralığında görüntüler. Sayfa ölçeği faktörü, sayfanın ekrana sığacağı şekilde ayarlanır ve kullanıcıların sayfayla etkileşimde bulunabilmek için yakınlaştırma yapmasını gerektirir.

Meta Görünüm Etiketi

Bir meta görünümü etiketi, tarayıcıya sayfanın boyutları ve ölçeklemesi üzerinde nasıl kontrol sağlayacağına ilişkin talimatlar sağlar ve dokümanın başlığına eklenmelidir.

Sabit Genişlikli Görünüm

Görünüm, width=320 veya width=1024 gibi belirli bir genişliğe ayarlanabilir. Bu önerilmese de, sabit boyutlu sayfaların beklendiği gibi görüntülenmesi için yararlı bir geçici önlem olabilir.

Esnek Görünüm

width=device-width meta görünüm değerini kullanmak, sayfaya ekranın genişliğini cihazdan bağımsız piksellerle eşleştirmesi talimatını verir. Bu, sayfanın farklı ekran boyutlarına uyacak biçimde yeniden düzenlenmesini sağlar.

iOS ve Windows Phone gibi bazı tarayıcılar, yatay moda döndürürken sayfanın genişliğini sabit tutar ve ekrana sığdırmak için yeniden düzenleme yerine yakınlaştırma yaptırır. initial-scale=1 özelliğini eklemek, cihaz yönü ne olursa olsun tarayıcılara CSS pikselleri ile cihazdan bağımsız pikseller arasında bir 1:1 ilişkisi oluşturma talimatı verir ve sayfanın tam yatay genişliği kullanmasına olanak sağlar.

Dikkat Edilecek Diğer Noktalar

minimum-scale, maximum-scale, user-scalable kullanmaktan kaçının

Minimum ve maksimum yakınlaştırmayı ayarlamak veya kullanıcının görünümde bütünüyle yakınlaştırma yapabilme özelliğini devre dışı bırakmak mümkündür. Bu seçenekler erişilebilirliği olumsuz şekilde etkiler ve genellikle bunlardan kaçınılmalıdır.

Bu özellikleri kullanmak zorunda kalırsanız da aşağıdaki şekilde kullanabilirsiniz: 

<meta name=viewport content="width=device-width, maximum-scale=0.8">

Kaynaklar:https://developers.google.com/speed/docs/insights/ConfigureViewport?hl=tr