Friday, 31 July 2015

Target High Pixel Density Displays

Menjadi semakin umum untuk perangkat mobile untuk mempunyai kerapatan piksel yang tinggi. Untuk pengguna akhir, keuntungan dari display dengan kerapatan piksel yang tinggi adalah sangat jelas, memberikan teks tajam,  dan gambar yang lebih tajam. Ini tidak hanya perangkat mobile yang untung dari revolusi ini dalam teknologi display; perusahaan komputer notebook juga menawarkan display kualitas yang tinggi pada mesin premium mereka.

Dengan pemikiran ini , ketika membangun sebuah situs web, Anda perlu melihat bagaimana Anda dapat mengambil keuntungan dari perubahan ini dalam teknologi display, dan untungnya browser tidak membiarkan kita terdampar, seperti media queries mendukung pengujian kerapatan piksel dari display menggunakan fitur resolution media.

Ketika menggunakan media queries untuk menargetkan perangkat dengan display kerapatan piksel yang tinggi, Anda menggunkan fitur media query resolution untuk memeriksa minimum screen resolution. Fitur ini mendukung tiga unit type yang berbeda ;
  1. dpi: dots per CSS inch
  2. dpcm: dots per CSS centimeter
  3. dppx: dots per pixel unit, 1dppx = 96dpi
Meskipun ini adalah unit dukungan, vendor browser merekomendasikan pengembang untuk menggunakan dppx, Google Chrome saat ini memberikan peringatan berikut jika Anda menggunakan dpi :

Pertimbangkan untuk menggunakan unit ‘dppx’ daripada ‘dpi’, Seperti dalam CSS ‘dpi’ berarti dots-per-CSS-inch,  bukan dots-per-physical-inch, sehingga tidak sesuai untuk ‘dpi’  yang sesungguhnya dari layar. Dalam media query expression: print, not all, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi)

https://github.com/h5bp/html5-boilerplate/issues/1474
Peringatan ini ditampilkan ketika menggunakan popular open source template yang disebut HTML5 boilerplate. Sebagai catatan peringatan, dpi adalah dots per CSS inch, yang dapat menyebabkan kebingungan untuk para developer yang tidak menyadari bahwa dpi dalam media queries tidak dpi yang sesungguhnya pada screen.

Sebelum saya menampilkan beberapa contoh bagaimana untuk menerapkan media queries yang ditargetkan pada display dengan kerapatan piksel yang tinggi, Anda perlu menyadari dari dukungan browser. Seperti pembahasan sebelumnya, CSS3 3 masih standar draft, yang berarti masing-masing dari browser memiliki penerapan tersendiri di belakang vendor prefix. Juga beberapa penerapan awal dari media query resolutions menggunakan resolusi perangkat fisik dari pada resolusi CSS. Meskipun juga harus menggunakan dppx  seperti unit dengan  resolution queries, itu ditambahkan ke spesifikasi lebih lambat dari dpi, sehingga untuk kompatibilitas dengan browser tidak menerapkan dppx, Anda harus juga mencakup dpi. Ini berarti bahwa Anda perlu untuk mengambil semua dari ini ke dalam akun ketika Anda menulis  media queries, penambahan tingkat kerumitan ketika Anda membaca  media queries. Dalam upaya mengcover sebanyak mungkin browser, media query berikut dapat digunakan  :

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),

only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
/* High resolution styles here */
}


Untuk melihat secara tepat bagaimana ktia dapat menangani perangkat dengan kerapatan piksel yang tinggi ini, mari lihat pada contoh sederhana untuk melihat bagaimana sebuah logo akan terlihat tanpa apapun media queries, dan kemudian menulis media query untuk menampilkan gambar resolusi tinggi ditempatnya.

Untuk mulai mari kita menulis beberapa HTML sederhana, menggunakan teknik image replacement untuk menambahkan sebuah logo ke H1 pada halaman. Seperti ditampilkan berikut :

<!DOCTYPE html>
<html>
<head>
<title>High Res Image Example</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="high-res-images.css">
</head>
<body>
<h1>logo</h1>
</body>
</html>



Ketika Anda perlu untuk membuat CSS . Untuk sekarang Anda hanya akan membuat CSS untuk menampilkan logo untuk resolusi standar. Mari menambahkan border di sekitar logo untuk menunjukkan ukuran image secara jelas.

h1{
width: 100px;
height: 100px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-image: url("low-res-image.png");
border: 3px solid #d3000c;
margin: 0px;
}


Sekarang ketika Anda melihat ini pada perangkat dengan dengan display kerapatan piksel yang tinggi, Anda dapat melihat bahwa ada beberapa ketidakselarasan yang disebabkan oleh upscaling dari image, seperti ditampilkan berikut :

Logo resolusi rendah ditampilkan di iOS

Kita sekarang dapat menlihat bahwa bagaimana kita dapat menambahkan media query untuk menangani loading versi resolusi tinggi dari logo.

Untuk memuat gambar versi kualitas tinggi, gunakan query Anda yang digunakan sebelumnya dan kemudian menambahkan beberapa CSS untuk mengubah background image ke versi resolusi tinggi dari image. Anda juga perlu untuk scale background image ke ukurang original gambar sehingga sesuai dengan dimensi yang sama.

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
h1{
background-image: url("high-res-image.png");
background-size: 100px 100px;
}
}


Sekarang jika Anda mencobanya pada perangkat dengan kerapatan  piksel yang tinggi, Anda akan melihat bahwa image logo ditampilkan dengan lebih jelas. seperti ditampilkan berikut :

Logo resolusi tinggi ditampilkan pada iOS

Ini hanya contoh sederhana dari bagaimana cara Anda dapat menggunakan media query untuk memperbaiki bagaimana sebuah situs web ditampilkan pada perangkat dengan kerapatan piksel yang tinggi.

No comments:

Post a Comment