Gönderen Konu: Mobil Görünümü Yapılandırma  (Okunma sayısı 598 defa)

Çevrimdışı orhan

  • Yönetici
  • Trade Sayısı: (0)
  • *
  • İleti: 384
  • Karma +19/-1
  • Cinsiyet: Bay
    • Profili Görüntüle
    • webtiryaki.com
Mobil Görünümü Yapılandırma
« : 25 Mar 2016, 09:36:19 »
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
Kod: [Seç]
width=device-width, initial-scale=1
 ifadesini içeren bir meta görünüm olmalıdır.
Kod: [Seç]
<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.
Kod: [Seç]
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ş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,
Kod: [Seç]
width=320
 veya
Kod: [Seç]
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
Kod: [Seç]
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.
Kod: [Seç]
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
Kod: [Seç]
width=device-width
 320 piksel boyutunda yatay genişlik sağlar.Sağ: iPhone 5'te döndürme
Kod: [Seç]
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
Kod: [Seç]
minimum-scale
Kod: [Seç]
maximum-scale
Kod: [Seç]
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.
Kod: [Seç]
@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
Kod: [Seç]
@viewport
 stilleriyle birlikte kullanmaya devam etmelidir.
Kaynaklar:
« Son Düzenleme: 25 Mar 2016, 09:38:51 Gönderen: orhan »