Web uygulamalarında farklı ekranları destekleme

Android, çeşitli ekran boyutlarına ve piksel yoğunluklarına sahip cihazlarda kullanılabildiğinden, sayfalarınızın uygun şekilde boyutlandırılması için web tasarımınızda bu faktörleri göz önünde bulundurun. WebView, web içeriğinizi uygun şekilde oluşturmanıza yardımcı olmak için DOM, CSS ve meta etiket özelliklerini destekler.

Web sayfalarınızı Android destekli cihazlar için hedeflerken hesaba katmanız gereken iki temel faktör vardır:

Görüntü alanı
Görüntü alanı, web sayfanız için çekilebilir bir bölge sağlayan dikdörtgen alandır. Boyutu ve başlangıç ölçeği gibi çeşitli görüntü alanı özelliklerini belirtebilirsiniz. En önemlisi, web sayfasının bakış açısından kullanılabilir olan toplam yatay piksel sayısını (mevcut CSS pikseli sayısını) tanımlayan görüntü alanı genişliğidir.
Ekran yoğunluğu
WebView sınıfı ve Android'deki çoğu web tarayıcısı, CSS piksel değerlerinizi yoğunluktan bağımsız piksel değerlerine dönüştürür. Böylece web sayfanız, orta yoğunluklu bir ekranla aynı algılanabilir boyutta, yani yaklaşık 160 dpi'de görünür. Bununla birlikte, grafikler web tasarımınızın önemli bir öğesiyse farklı yoğunluklarda oluşan ölçeklemelere dikkat edin. Örneğin, 320 dpi ekranda 300 piksel genişliğindeki bir resim büyütülür. Bu resim, CSS pikseli başına daha fazla fiziksel piksel kullanır. Bu durumda bulanıklaştırma ve pikselleşme gibi hatalar oluşabilir. Android, daha basit olması için çoğu küçük ekran yoğunluğunu birkaç genel kategoriye daraltır: küçük, orta ve büyük. Ekran yoğunluğu hakkında daha fazla bilgi için Farklı piksel yoğunluklarını destekleme konusunu okuyun.

Aşağıdaki ilgili kaynaklara bakın:

Görüntü alanı özelliklerini belirtin

Görünüm, web sayfanızın çizildiği alandır. Görüntü alanının toplam görünür alanı, tamamen uzaklaştırıldığında ekranın boyutuyla eşleşse de, görüntü alanının web sayfasında kullanılabilmesini sağlayan kendi piksel boyutları vardır. Örneğin, bir cihaz ekranının fiziksel genişliği 480 piksel olsa da görüntü alanının genişliği 800 piksel olabilir. Bu, 800 piksel genişliğinde tasarlanmış bir web sayfasının, görüntü alanı ölçeği 1,0 olduğunda ekranda tamamen görünür olmasını sağlar.

Android'deki çoğu web tarayıcısı (Chrome dahil), görüntü alanını varsayılan olarak büyük bir boyuta ayarlar. Bu _wide görüntü alanı modu_ yaklaşık 980 piksel genişliğindedir. Ayrıca birçok tarayıcı, _overview mode_ olarak bilinen tam görüntü alanı genişliğini göstermek için varsayılan olarak mümkün olduğunca uzaklaştırır.

Dokümanınızdaki <meta name="viewport" ...> etiketini<head> kullanarak web sayfanızın görüntü alanının özelliklerini (genişlik ve ilk yakınlaştırma düzeyi gibi) tanımlayabilirsiniz.

Aşağıdaki söz dizimi, desteklenen tüm görüntü alanı özelliklerini ve her birinin kabul ettiği değer türlerini gösterir:

<meta name="viewport"
      content="
          height = [pixel_value | "device-height"] ,
          width = [pixel_value | "device-width"] ,
          initial-scale = float_value ,
          minimum-scale = float_value ,
          maximum-scale = float_value ,
          user-scalable = ["yes" | "no"]
          " />

Örneğin, aşağıdaki <meta> etiketi, görüntü alanı genişliğinin cihaz ekranının genişliğiyle eşleştiğini ve yakınlaştırma özelliğinin devre dışı bırakıldığını belirtir:

<head>
    <title>Example</title>
    <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

Sitenizi mobil cihazlar için optimize ederken, boyutu genellikle tüm cihazlara tam olarak uyacak şekilde "device-width" olarak ayarlarsınız. Ardından düzenleri farklı ekran boyutlarına uyacak şekilde esnek bir şekilde uyarlamak için CSS medya sorgularını kullanın.

CSS ile hedef cihaz yoğunluğu

WebView, belirli ekran yoğunlukları için stiller oluşturmanıza olanak tanıyan bir CSS medya özelliği olan -webkit-device-pixel-ratio'i destekler. Stillerin sırasıyla düşük, orta veya yüksek yoğunluklu ekranlara sahip cihazlara yönelik olduğunu belirtmek için bu özelliğe uyguladığınız değer 0,75, 1 veya 1,5 olmalıdır.

Her yoğunluk için ayrı stil sayfaları oluşturabilirsiniz:

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />

Veya tek bir stil sayfasında farklı stilleri belirtebilirsiniz:

#header {
    background:url(medium-density-image.png);
}

@media screen and (-webkit-device-pixel-ratio: 1.5) {
    /* CSS for high-density screens */
    #header {
        background:url(high-density-image.png);
    }
}

@media screen and (-webkit-device-pixel-ratio: 0.75) {
    /* CSS for low-density screens */
    #header {
        background:url(low-density-image.png);
    }
}

Farklı ekran yoğunluklarını, özellikle de resimleri işleme hakkında daha fazla bilgi edinmek için Değişken piksel yoğunlukları için yüksek DPI resimler bölümüne bakın.

JavaScript ile hedef cihaz yoğunluğu

WebView, geçerli cihazın yoğunluğunu sorgulamanıza olanak tanıyan bir DOM özelliği olan window.devicePixelRatio özelliğini destekler. Bu özelliğin değeri, mevcut cihaz için kullanılan ölçeklendirme faktörünü belirtir. window.devicePixelRatio değeri 1,0 ise cihaz orta yoğunluklu bir cihaz olarak kabul edilir ve varsayılan olarak ölçeklendirme uygulanmaz. Değer 1, 5 ise cihaz yüksek yoğunluklu bir cihaz olarak kabul edilir ve sayfa varsayılan olarak 1, 5 kat ölçeklendirilir. Değer 0, 75 ise cihaz düşük yoğunluklu bir cihaz olarak kabul edilir ve sayfa varsayılan olarak 0, 75x ölçeklendirilir.

Android tarayıcı ve WebView uygulamasının uyguladığı ölçeklendirme, web sayfasının hedef yoğunluğuna bağlıdır. Görüntü alanı hedef yoğunluğunu tanımlama bölümünde açıklandığı gibi, varsayılan hedef orta yoğunluktur, ancak web sayfanızın farklı ekran yoğunluklarında nasıl ölçeklendirileceğini etkilemesi için hedefi değiştirebilirsiniz.

JavaScript ile cihaz yoğunluğunu şu şekilde sorgulayabilirsiniz:

if (window.devicePixelRatio == 1.5) {
  alert("This is a high-density screen");
} else if (window.devicePixelRatio == 0.75) {
  alert("This is a low-density screen");
}