WEB UYGULAMALARINDA EKRAN UYUMU :MobileCoder I MobileCoder.NET I Mobil Programlama I Android Programlama I Mobil Geliştiricilerin Buluşma Noktası I www.MobileCoder.Net

WEB UYGULAMALARINDA EKRAN UYUMU

06.04.2015 tarihinde Başlangıç Seviyesi kategorisine eklenmiş, 121 views Kişi Okumuş ve 0 Yorum Yapılmış.

Android için web uygulamaları hazırlarken odaklanmamız gereken en önemli noktaların başında uygulamamızın  farklı ekran çözünürlük ve boyutlarında nasıl görüntüleneceği konusudur.

Viewport tanımını inceleyecek olursak , viewport herhangi bir cihaz ve ekran için görünüm penceresi yani görünen alana verilen isimdir . Android 2.0 ve daha sonraki sürümlerde   Webview kontrolü ve Android içerisinde buluna mevcut web tarayıcı (browser) bir viewport özelliğine sahiptir . Bu viewpor özelliğine göre web uygulamalarımızı farklı ekran çözünürlük ve boyutlarına göre tasarlayabiliriz .

Android üzerinde web uygulamaları tasarlarken hesap etmemiz gereken iki önemli faktör vardır :

1.Viewport Büyüklüğü ve Web Sayfasının  Ölçeği : Android web tarayıcı sayfayı yüklediğinde varsayılan olarak bir “önizleme modu” devreye sokulur ve bu modda otomatik olarak bir viewport değeri hesaplanır ve bu değere göre sayfa ölçeklendirilir.

2.Cihazların Ekran Yoğunluğu : Ekran yoğunluğu (inç başına düşen nokta sayısı) Android tabanlı cihazlarda web sayfasının ya da içeriğinin hangi çözünürlükte ve büyüklükte görüneceğini etkiler . Bu noktada önceden belirlenmiş üç kategoriye yoğunluklar belirlenmiştir . bunlar low(düşük) , medium(normal) ve high(yüksek) olarak belirlenmiştir .

Viewport kavramını biraz daha açacak olursak , web sayfaları üzerinde çizdirilen bir görüntü penceresi viewport demektir . Hal böyle olunca aslında cihazın çözünürlüğü farklı iken viewport değeri farklı olabilir .

<head>
<title>Kodgraf</title>
<meta name =”viewport” content=”with=device-with, user-scalable=no”/>
</head>

Viewpor özelliği bir meta ifadesidir ve HTML içerisinde <head></head>         etiketleri arasında <meta> etiketi ile tanımlanır . Bu meta tanımlamasının content özniteliğine yazılan ifadeler ile viewport özelliğinin nitelikleri belirlenir . Aşağıda viewport değerinin alabileceği content niteliklerinin kullanımı gösterilmiştir :

<meta name =”viewport”
content=”
height=[pixel_value | device-height ] ,
widht=[pixel_value | device-widht ] ,
initial-scale=float_value ,
minimum-scale=float_value ,
maximum-scale=float_value ,
user-scalable = [yes | no ]
target-densitydpi = [dpi_value | device –dpi
hight-dpi | medium-dpi | low-dpi ]
“/>

initial-scale değeri sayfanın ölçeklendirilme değerini verir , minimum-scale ve maximum scale değerleri ise herhangi bir şekilde kullanıcı tarafından bu ölçeklendirme işlemi yapılacaksa , bu ölçeklendirme değerinin  en düşük ve en yüksek değerlerini belirtmek için kullanılır . user-scalable değeri ise kullanıcıların sayfayı ölçeklendirip ölçeklendirmeyeceğini belirten bir değerdir . Son olarak ise target-densitydpi özelliği ile  hedeflenen yoğunluğuk değer belirlenir.

Örneğin 320 pixel boyutunda bir resim web tarayıcı (browser) üzerinde  her iki cihazdada farklı boyutta görüntülenmektedir . Bu gibi durumları özelleştirmek ve farklı ekran yoğunlukları için farklı resim vb. yüklemek istersek CSS ve Javascript tanımları ile bu işlemi gerçekleştirebiliriz .

<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” />
<link rel = “stylesheet” media==”screen and (-webkit-device-pixel-ratio:0.75” href=”ldpi.css” />

Yukarıdaki gibi farklı yoğunluklara özel yoğunluk tanımlaması yapabilmek için CSS’in media elementi kullanılır . High dpi cihazlar için 1.5 , medium dpi cihazlar için 1.0 , low dpi cihazlar için 0.75 değerinin atanması sağlanmıştır .

Ayrı ayrı tanımlanan CSS dosyaları  ile ise geçerli dpi  değerine göre farklı resimlerin resimlerin yüklenmesi sağlanarak daha efektif bir görününm sağlanabilir ve görünüm özelleştirilebilir .

/Varsayılan değer medium yoğunluk değerine göre yorumlanacak CSS*/
#header  {
background : url(medium-density-image.png);
}
/* media değerine girilen –webkit-device-pixel-ratio:1.5 ise bu alan yorumlanır */
&media screen and  (-webkit-device-pixel-ratio:1.5) {
/*Yüksek (high) ekranlar için yorumlanacak CSS */
#header  {
background : url(high-density-image.png);
}
}
/* media değerine girilen –webkit-device-pixel-ratio:0.75 ise bu alan yorumlanır */
&media screen and  (-webkit-device-pixel-ratio:0.75) {
/*Düşük (low) ekranlar için yorumlanacak CSS */
#header  {
background : url(low-density-image.png);
}
}

Yukarıdaki tanımlamalar ile her yoğunluk değerine göre farklı görsellerin yüklenmesi sağlanacak

Mehmet Mert TANRIÖVER

KAYNAK

Android Tabanlı Mobil Uygulama Geliştirme (Berkan Uslu, Kodlab)

 

 

 

Yazar Hakkında

Yazar : Recep

Yazar Hakkında :

Yazarın Tüm Yazıları İçin Tıklayınız

Yorumlar

Sitemizde En Çok Okunan İçerikler

ANDROİD TELEFONLARA ROOT ATMA
ANDROİD TELEFONLARA ROOT ATMARoot Ne demek ? Bir android cihazı root etmek telefonun
fragment
ANDROİD FRAGMENT YAPISI VE KULLANIMIFragmentler Activity içerisinde yer alan kullanıcı ara yüzleridir. Fragment
Asp.NET’de web servis hazırlama ve Android de kullanimi  Web Servis Nedir ? Web üzerinden HTTP protokolü ile hizmet
ANDROİD TELEFONLARDA KONFERANS GÖRÜŞME
ANDROİD TELEFONLARDA KONFERANS GÖRÜŞMEANDROİD TELEFONLARDA KONFERANS GÖRÜŞME   Konferans görüşme çok fazla bilinmeyen androidin

Sitemizde En Çok Yorumlanan İçerikler

WEB UYGULAMALARINDA EKRAN UYUMU
WEB UYGULAMALARINDA EKRAN UYUMUAndroid için web uygulamaları hazırlarken odaklanmamız gereken en önemli
ActionBar Kullanım Özellikleri
ActionBar Kullanım ÖzellikleriActionBar Genel Bakış ActionBar temel olarak 4 ana işlevsel alan barındırır.

Son Yapılan Yorumlar

  • Kategoriler

  • Son Yazılar

  • Takvim

    Haziran 2017
    P S Ç P C C P
    « Kas    
     1234
    567891011
    12131415161718
    19202122232425
    2627282930  
  • Etiketler

  • Son Yorumlar

    • Arşivler

    • Meta