Görünümü Yapılandırma

Bu kural, PageSpeed Insights, sayfanızın herhangi bir görünüm belirtmediğini veya farklı cihazlara uyarlanmayan bir görünüm belirttiğini algıladığında tetiklenir.

Genel Bakış

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">

Ek bilgiler

Terimler:

  • Donanım pikseli: Ekrandaki fiziksel bir piksel. Örneğin, bir iPhone 5'in ekranında 640 yatay donanım pikseli vardır.
  • Cihazdan bağımsız piksel (dip): Normal görüntüleme mesafesinde bir tek tip referans pikseli ile eşleşecek cihaz piksellerine ilişkin, tüm cihazlarda yaklaşık olarak aynı olması gereken bir ölçek. iPhone 5, 320 dip genişliktedir.
  • CSS pikseli: Görünüm tarafından kontrol edilen sayfa düzeni için kullanılan birim. width: 100px gibi stillerdeki piksel boyutları CSS pikseli olarak belirtilir. CSS piksellerinin cihazdan bağımsız piksellere oranı sayfanın ölçek faktörü veya yakınlaştırmasıdır.

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şlik aralığı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.

Sol: iPhone 5'te döndürme (width=device-width), 320 piksel boyutunda yatay genişlik sağlar.
Sağ: iPhone 5'te döndürme (width=device-width, initial-scale=1), 568 piksel boyutunda yatay genişlik sağlar.

Esnek bir görünüm kullanmak için, sayfalar farklı genişliklerde çalışacak şekilde tasarlanmalıdır. Öneriler için içeriği görünüme göre boyutlandırma konusuna bakın.

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.

@viewport

Meta görünüm etiketi geniş ölçüde desteklense de, resmi bir standardın parçası değildir. Bu çalışma biçimi CSS Cihaz Uyarlaması teknik özelliğinin parçası olarak CSS'ye eklenmiştir. Bu teknik özelliğe son şekli verilip geniş ölçüde uygulanana kadar, yazarlar uyumluluk için meta görünüm etiketini tek başına veya karşılık gelen @viewport stilleriyle birlikte kullanmaya devam etmelidir.

Kaynaklar: