Web uygulamalarında farklı ekranları destekleme

Android farklı ekran boyutlarına ve piksel yoğunluklarına sahip cihazlarda kullanılabildiğinden sayfalarınızın gerektiği gibi boyutlandırılması için web tasarımınızda bu faktörleri göz önünde bulundurun. WebView DOM, CSS ve meta etiketi destekler özelliklerini kullanarak web içeriğinizi uygun şekilde oluşturabilirsiniz.

Web sayfalarınızı Android destekli cihazlar için hedeflerken, iki temel faktörü göz önünde bulundurmanız gerekir: şunun için:

Görüntü alanı
Görüntü alanı, web sayfanız için çekilebilir bir bölge sağlayan dikdörtgen alandır. Siz boyutu ve başlangıç ölçeği gibi çeşitli görüntü alanı özelliklerini belirtebilir. En önemlisi, Web sayfasının her bir katmanından kullanılabilen yatay piksellerin toplam sayısını bakış açısı: Kullanılabilir CSS piksellerinin sayısı.
Ekran yoğunluğu
WebView sınıfı ve Android'deki çoğu web tarayıcısı, CSS piksel değerlerinizi dönüştürür yoğunluktan bağımsız piksel değerlerine odaklanır. Böylece, web sayfanız şununla aynı algılanabilir boyutta orta yoğunlukta bir ekran (yaklaşık 160 dpi). Ancak grafikler işletmeniz için önemli bir öğeyse web tasarımında da farklı yoğunluklarda gerçekleşen ölçeklemeye dikkat edin. Örneğin, menüdeki 320 dpi'lik bir ekranda 300 piksel genişliğinde olan bir resim büyütülür. Her CSS için daha fazla fiziksel piksel kullanılır. piksel. Bu, bulanıklaştırma ve pikselleştirme gibi kusurlar oluşturabilir. Kolaylık sağlaması için Android yoğunluklarını birkaç genel kategoriye ayırıyoruz: küçük, orta ve büyük. Öğrenmek için ekran yoğunluğu hakkında daha fazla bilgi, Farklı piksel yoğunluklarını destekleyin.

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 tamamen uzaklaştırıldığında ekran boyutuyla eşleşiyorsa görüntü alanının kendi pikseli vardır boyutlarıyla birlikte çalışır. Örneğin, bir cihaz ekranında 480 piksel fiziksel genişliği varsa, görüntü alanının genişliği 800 piksel olabilir. Bu, bir web sayfasının 800 piksel genişlikte tasarlanan ve görüntü alanı ölçeği 1,0 olduğunda ekranda tamamen görünür.

En sık Chrome da dahil olmak üzere Android'deki web tarayıcılarının görüntü alanını varsayılan olarak büyük bir boyuta ayarlar. Bu _geniş görüntü alanı modu_ yaklaşık 980 piksel genişliğindedir. Tarayıcıların çoğu, aynı zamanda uzaklaştırarak _genel bakış modu_ olarak bilinen tam görüntü alanı genişliğini göstermek için varsayılan olarak mümkün olur.

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

Aşağıdaki söz dizimi, desteklenen tüm görüntü alanı özelliklerini ve değer türlerini gösterir. her biri tarafından kabul edildi:

<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 ve yakınlaştırma özelliğinin devre dışı bırakılmış olması gerekir:

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

Sitenizi mobil cihazlar için optimize ederken genişliği genellikle "device-width" boyutunu tüm cihazlara tam olarak sığacak şekilde ayarlayın ve ardından aşağıdakileri yapmak için CSS medya sorgularını kullanın: Düzenleri farklı ekran boyutlarına uyacak şekilde esnek bir şekilde uyarlayabilirsiniz.

CSS ile cihaz yoğunluğunu hedefleme

WebView, bir CSS medyası olan -webkit-device-pixel-ratio öğesini destekler özelliğini kullanmanızı öneririz. Buna uyguladığınız değer özellik 0, 75, 1 veya 1, 5 olmalıdır. Bu değer, stillerin düşük, orta veya yüksek yoğunluklu ekranlara öncelik verin.

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

İsterseniz farklı stilleri bir stil sayfasında 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 resimleri) yönetme hakkında daha fazla bilgi için Şunun için yüksek DPI resimler: Değişken piksel yoğunlukları.

JavaScript ile cihaz yoğunluğunu hedefleme

WebView, şunu destekleyen bir DOM özelliği olan window.devicePixelRatio'ı destekler: mevcut cihazın yoğunluğunu sorgulamanızı sağlar. Bu özelliğin değeri, faktörünü ifade eder. window.devicePixelRatio değeri 1,0 ise o cihaz orta yoğunluklu cihaz olarak kabul edilir ve varsayılan olarak ölçeklendirme uygulanmaz. Öğe değeri 1,5 ise cihaz, yüksek yoğunluklu cihaz olarak kabul edilir ve sayfa 1,5 kat varsayılandır. Değer 0, 75 ise cihaz, düşük yoğunluklu cihaz olarak kabul edilir ve sayfa varsayılan olarak 0,75x ölçeklendirilir.

Android tarayıcı ve WebView tarafından uygulanan ölçeklendirme, web sayfasının hedef yoğunluğuna göre belirleniyor. Görüntü alanını tanımlama hedef yoğunluğuna izin verdiyseniz varsayılan hedef orta yoğunluktadır ancak hedefi, Web sayfanızın farklı ekran yoğunluklarına göre nasıl ölçeklendirildiğini kontrol edin.

Örneğin, 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");
}