Yayınlanma tarihi: 28 Şubat 2014
WebView'iniz için mükemmel arayüzü oluşturmak üzere kullanabileceğiniz çeşitli seçenekler vardır.
Görüntü alanı meta etiketini ayarlama
Görünüm alanı meta etiketi, web uygulamanıza eklenebilecek en önemli etiketlerden biridir. Bu etiket olmadan WebView, siteniz masaüstü tarayıcılar için tasarlanmış gibi davranabilir. Bu işlem, web sayfanıza daha geniş bir genişlik (genellikle 980 piksel) atanmasına ve sayfanın WebView genişliğine sığacak şekilde ölçeklendirilmesine neden olur. Bu durum çoğu zaman, sayfanın küçük bir genel bakış sürümüne yol açar. Bu sürümde, kullanıcının içeriği gerçekten okumak için kaydırması ve yakınlaştırması gerekir.
Sitenizin genişliğinin WebView'in genişliğinin% 100'ü olmasını istiyorsanız görüntü alanı meta etiketini ayarlayın:
<meta name="viewport" content="width=device-width, initial-scale=1">
Sayfa düzeni üzerinde daha fazla kontrol sahibi olmak için genişlik özelliğini cihaz-genişliği özel değerine ayarlayın.
WebView, varsayılan olarak masaüstü görüntü alanını kullanmak yerine görüntü alanını device-width olarak ayarlar. Ancak güvenilir ve kontrollü bir davranış için viewport meta etiketini eklemek iyi bir uygulamadır.
Masaüstü sitelerini görüntüleme
Bazı durumlarda, mobil cihazlar için tasarlanmamış içerikler göstermeniz gerekebilir. Örneğin, kontrol etmediğiniz içerikleri gösterebilirsiniz. Bu durumda, Web Görünümü'nü masaüstü boyutunda bir görüntü alanı kullanmaya zorlayabilirsiniz:
Bu yöntemler ayarlanmazsa ve görünüm belirtilmezse WebView, görünüm genişliğini içerik boyutuna göre ayarlamaya çalışır.
Ayrıca, mobil cihazlarda daha okunaklı olması için yazı tipi boyutunu artıran TEXT_AUTOSIZING düzen algoritmasını da kullanabilirsiniz. setLayoutAlgorithm işlevine bakın.
Duyarlı tasarım kullanma
Duyarlı tasarım, ekran boyutuna göre değişen bir arayüz tasarlama yaklaşımıdır.
Uyumlu tasarımı uygulamanın çeşitli yolları vardır. En yaygınlarından biri, CSS'yi bir cihazın özelliklerine göre öğelere uygulayan @media sorguları'dır.
Örneğin, yöne göre dikey düzenden yatay düzene geçmek istediğinizi varsayalım. CSS özelliklerini varsayılan olarak dikey olarak ayarlayın:
.page-container {
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
flex-direction: column;
padding: 20px;
box-sizing: border-box;
}
Yatay bir düzene geçmek için flex-direction özelliğini yöne göre değiştirin:
@media screen and (orientation: landscape) {
.page-container.notification-opened {
-webkit-box-orient: horizontal;
flex-direction: row;
}
.page-container.notification-opened > .notification-arrow {
margin-right: 20px;
}
}
Düzeni ekran genişliğine göre de değiştirebilirsiniz.
Örneğin, fiziksel ekran boyutu büyüdükçe düğme genişliğinin boyutunu% 100'den daha küçük bir değere ayarlama.
button {
display: block;
width: 100%;
...
}
@media screen and (min-width: 500px) {
button {
width: 60%;
}
}
@media screen and (min-width: 750px) {
button {
width: 40%;
max-width: 400px;
}
}
Bunlar küçük değişikliklerdir ancak medya sorguları, kullanıcı arayüzünüze bağlı olarak aynı HTML'yi korurken uygulamanızın görünümünde çok daha büyük değişiklikler yapmanıza yardımcı olabilir.
Net ve net resimler
Ekran boyutları ve yoğunluklarının çeşitliliği, resimler için de zorluklar oluşturur. Küçük resimler daha az bellek gerektirir ve daha hızlı yüklenir ancak ölçeğini büyütürseniz bulanıklaşır.
Resimlerinizin her ekranda net ve keskin görünmesini sağlamak için aşağıdaki ipuçlarından yararlanabilirsiniz:
- Ölçeklenebilir efektler için CSS'yi kullanın.
- Vektör grafikleri kullanın.
- Yüksek çözünürlüklü fotoğraflar yükleyin.
Ölçeklenebilir efektler için CSS kullanma
Mümkün olduğunda resim yerine CSS kullanın. Bazı CSS özelliği kombinasyonlarının oluşturulmasının pahalı olabileceğini unutmayın. Her zaman kullandığınız belirli kombinasyonları test edin.
Kullanıcının sayfaya ilk kez gittiği andan sayfa içeriğinin herhangi bir bölümünün ekranda oluşturulmasına kadar geçen süreyi ölçen İlk Zengin İçerikli Boyama (FCP) hakkında daha fazla bilgi edinin. "İçerik"; metin, resimler (arka plan resimleri dahil), <svg> öğeleri ve beyaz olmayan <canvas> öğelerini ifade eder.
Vektörel grafikleri kullan
Ölçeklenebilir Vektör Grafikleri (SVG'ler), ölçeklenebilir bir resim sağlamak için mükemmel bir yöntemdir. SVG, vektör grafiklerine uygun resimler için çok küçük dosya boyutlarında yüksek kaliteli resimler sağlar.
Yüksek çözünürlüklü fotoğraflar sunun
Yüksek DPI'ye sahip bir cihaza uygun bir fotoğraf kullanın ve resmi CSS kullanarak ölçeklendirin. Böylece resim, cihazlar arasında yüksek kalitede oluşturulabilir. Resmi oluştururken yüksek sıkıştırma (düşük kalite ayarı) kullanırsanız makul bir dosya boyutuyla iyi görsel sonuçlar elde edebilirsiniz.
Bu yaklaşımın birkaç dezavantajı vardır: Yüksek oranda sıkıştırılmış resimlerde bazı görsel bozulmalar görülebilir. Bu nedenle, kabul edilebilir bulduğunuz sıkıştırma düzeyini belirlemek için deneme yapmanız gerekir. Ayrıca, resmi CSS'de yeniden boyutlandırmak pahalı bir işlem olabilir.
Yüksek sıkıştırma, ihtiyaçlarınıza uygun değilse nispeten küçük dosya boyutuyla yüksek kaliteli resimler sağlayan WebP biçimini deneyin. WebP'nin desteklenmediği Android sürümleri için yedek bir seçenek sunmayı unutmayın.
Ayrıntılı kontrol
Çoğu durumda, tüm cihazlar için tek bir resim kullanamazsınız. Bu durumda, ekran boyutuna ve yoğunluğuna göre farklı resimler seçebilirsiniz. Arka plan resimlerini ekran boyutuna ve yoğunluğuna göre seçmek için medya sorgularını kullanın.
Resimlerin nasıl yükleneceğini kontrol etmek için JavaScript'i kullanabilirsiniz ancak bu işlem karmaşıklığı artırır.
Medya sorguları ve ekran yoğunluğu
Ekran yoğunluğuna göre bir resim seçmek için medya sorgunuzda dpi veya dppx birimleri kullanmanız gerekir. dpi birimi, CSS inç başına nokta sayısını, dppx ise CSS piksel başına nokta sayısını temsil eder.
Aşağıdaki tabloda dpi ile dppx arasındaki ilişkiyi görebilirsiniz.
| Cihaz piksel oranı | Genelleştirilmiş ekran yoğunluğu | CSS inç başına nokta sayısı (dpi) |
CSS pikseli başına nokta sayısı (dppx) |
|---|---|---|---|
| 1x | MDPI | 96dpi |
1dppx |
| 1,5x | HDPI | 144dpi |
1.5dppx |
| 2 | XHDPI | 192dpi |
2dppx |
Genelleştirilmiş ekran yoğunluğu grupları Android tarafından tanımlanır ve ekran yoğunluğunu ifade etmek için başka yerlerde kullanılır (ör. https://screensiz.es).
Arka plan resimleri
Öğelere arka plan resimleri atamak için medya sorgularını kullanabilirsiniz. Örneğin, piksel oranı 1, 0 olan bir cihazda 256 piksel x 256 piksel boyutunda bir logo resminiz varsa aşağıdaki CSS kurallarını kullanabilirsiniz:
.welcome-header > h1 {
flex: 1;
width: 100%;
max-height: 256px;
max-width: 256px;
background-image: url('../images/html5_256x256.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
Cihaz piksel oranı 1,5 (hdpi) ve 2,0 (xhdpi) olan cihazlarda bunu daha büyük bir resimle değiştirmek için aşağıdaki kuralları ekleyebilirsiniz:
@media screen and (min-resolution: 1.5dppx) {
.welcome-header > h1{
background-image: url('../images/html5_384x384.png');
}
}
@media screen and (min-resolution: 2dppx) {
.welcome-header > h1{
background-image: url('../images/html5_512x512.png');
}
}
Ardından bu tekniği min-width gibi diğer medya sorgularıyla birleştirebilirsiniz. Bu, farklı form faktörlerini hesaba kattığınız için yararlıdır.
@media screen and (min-resolution: 2dppx) {
.welcome-header > h1{
background-image: url('../images/html5_512x512.png');
}
}
@media screen and (min-resolution: 2dppx) and (min-width: 1000px) {
.welcome-header > h1{
background-image: url('../images/html5_1024x1024.png');
max-height: 512px;
max-width: 512px;
}
}
1024x1024 piksel boyutunda bir resimle 2ddpx çözünürlüğü için max-height ve max-width değerlerinin 512 piksel olarak ayarlandığını fark edebilirsiniz. Bunun nedeni, CSS "pikselinin" aslında cihaz piksel oranını hesaba katmasıdır (512 piksel * 2 = 1024 piksel).
<img/> ne dersiniz?
Web'de şu anda bunun için bir çözüm bulunmuyor. Bazı öneriler olsa da bunlar mevcut tarayıcılarda veya WebView'de kullanılamaz.
Bu sırada, DOM'unuzu JavaScript'te oluşturursanız dikkatli bir dizin yapısında birden fazla resim kaynağı oluşturabilirsiniz:
images/
mdpi/
imagename.png
hdpi/
imagename.png
xhdpi/
imagename.png
Ardından, en uygun resmi çekmeye çalışmak için piksel oranını kullanın:
function getDensityDirectoryName() {
if(!window.devicePixelRatio) {
return 'mdpi';
}
if(window.devicePixelRatio > 1.5) {
return 'xhdpi';
} else if(window.devicePixelRatio > 1.0) {
return 'hdpi';
}
return 'mdpi';
}
Alternatif olarak, resimlerin göreli URL'lerini tanımlamak için sayfanın temel URL'sini değiştirebilirsiniz.
<!doctype html>
<html class="no-js">
<head>
<script>
function getDensityDirectoryName() {
if(!window.devicePixelRatio) {
return 'mdpi';
}
if(window.devicePixelRatio > 1.5) {
return 'xhdpi';
} else if(window.devicePixelRatio > 1.0) {
return 'hdpi';
}
return 'mdpi';
}
var baseUrl =
'file:///android_asset/www/img-js-diff/ratiores/'+getDensityDirectoryName()+'/';
document.write('<base href="'+baseUrl+'">');
</script>
...
</head>
<body>
...
</body>
</html>
Bu yaklaşım, sayfa yüklemesini engeller ve ana URL yoğunluğa özel bir dizine işaret ettiğinden resimler, komut dosyaları ve CSS dosyaları gibi tüm kaynaklar için mutlak yolların kullanılmasını zorunlu kılar.