Diskusi tentang Ukuran Situs Web Di Situs Web HTML5 Building Touch Screen

Artikel ini dibagi menjadi dua bagian. Bagian pertama membahas kelayakan situs web lintas platform, dan bagian kedua membahas bagaimana viewport diatur.

Memang benar bahwa lebar dan tinggi label dapat beradaptasi, kita dapat melakukan ini lebih awal. Tetapi Anda akan menemukan bahwa banyak situs web PC tradisional masih memperbaiki lebarnya. (Taobao menggunakan lebar 1000px, Sohu 950px ...) Mengapa kita tidak mengizinkan situs web untuk beradaptasi dengan lebar dan tinggi? Itu karena jika kita membiarkan lebar label diregangkan secara sewenang -wenang oleh browser, itu akan menyebabkan pengalaman yang sangat buruk: Anda tidak ingin bilah kiri Anda berubah menjadi mie ketika browser diskalakan ke 100px; Anda juga tidak ingin situs web Anda terlihat seperti netbook untuk siswa sekolah dasar ketika browser terlalu padat. Oleh karena itu, tidak realistis untuk mengandalkan adaptasi label untuk mencapai platform lintas dan dengan mengorbankan pengalaman pengguna. Sering kali kita harus memperbaiki lebar dan tinggi.

Kami mengandalkan perangkat HTML5 untuk memeriksa apakah perangkat saat ini adalah ponsel atau tablet, dan memuat CSS yang sesuai. Misalnya: Jika Anda mendeteksi bahwa perangkat Anda adalah tablet, saya dapat menampilkan tiga kolom secara horizontal, dan jika itu adalah ponsel, saya hanya akan menampilkan satu kolom. Ini kedengarannya tidak sulit, tetapi sangat rumit untuk diimplementasikan. Kami tidak hanya perlu mengembangkan beberapa set templat untuk perangkat yang berbeda, tetapi juga memproses ukuran gambar. Dalam hal ini, kita dapat melihat bagaimana Boston Globe menggunakan HTML5 untuk mengimplementasikan desain responsif.

Secara umum, mencapai situs web lintas platform terlalu mahal dan terbatas untuk sebagian besar situs web. Apakah itu layak tergantung pada situasi sebenarnya dari situs web.

Browser seluler menempatkan halaman di jendela virtual (viewport). Biasanya, jendela virtual (viewport) lebih luas dari layar, sehingga setiap halaman web tidak harus memeras setiap halaman web ke jendela yang sangat kecil (ini akan menghancurkan tata letak halaman web yang tidak dioptimalkan untuk browser seluler). Pengguna dapat melihat berbagai bagian halaman web melalui panning dan zoom. Browser seluler telah memperkenalkan tag meta viewport, yang memungkinkan pengembang web untuk mengontrol ukuran dan penskalaan viewport.

CSS Pixels: Unit abstrak yang digunakan oleh browser, terutama digunakan untuk menggambar konten di halaman web.

Piksel Perangkat: Menampilkan unit fisik minimum layar, masing -masing DP berisi warna dan kecerahannya sendiri.

Berapa banyak piksel CSS dengan nilai yang setara yang menempati layar ponsel tidak diperbaiki, itu tergantung pada banyak atribut. Setelah analisis dan ringkasan, kita dapat menghasilkan rumus: 1 piksel css = (devicepixelratio)^2 piksel perangkat (^2 berarti persegi. Adapun apa devicepixelratio, itu akan dijelaskan nanti).

PPI, kadang -kadang juga disebut DPI, mewakili jumlah piksel per inci. Semakin tinggi nilainya, semakin tinggi tampilan dapat menampilkan gambar. (Catatan: Piksel di sini merujuk ke piksel perangkat.) Setelah kami mengetahui apa arti PPI, kami dapat dengan mudah memahami metode perhitungan PPI. Pertama -tama kita perlu menghitung piksel ekuivalen diagonal dari layar ponsel, dan kemudian menempatkan diagonal (ukuran layar ponsel adalah panjang garis diagonal dari layar ponsel), dan kita bisa mendapatkan PPI. Untuk pengumuman perhitungan yang akurat, Anda dapat merujuk pada gambar di bawah ini. Yang lebih menarik adalah bahwa PPI iPhone 4 yang dihitung berdasarkan formula adalah 330, yang sedikit lebih tinggi dari 326 yang secara resmi diumumkan oleh Apple.

Demikian pula, mengambil HTC G7 sebagai contoh, resolusi 480*800 dan 3,7 inci dihitung sebagai PPI 252.

Kami menghitung PPI untuk mengetahui interval kerapatan mana yang dimiliki perangkat ponsel, karena interval kepadatan yang berbeda sesuai dengan rasio penskalaan default yang berbeda, yang merupakan konsep yang sangat penting.

Dari gambar di atas, dapat dilihat bahwa ponsel dengan PPI antara 120-160 diklasifikasikan sebagai ponsel dengan kepadatan rendah, 160-240 diklasifikasikan sebagai kepadatan sedang, 240-320 diklasifikasikan sebagai kepadatan tinggi, dan di atas 320 diklasifikasikan.

Kepadatan ini sesuai dengan nilai penskalaan tertentu. Ambil iPhone 4 atau 4 yang paling kami kenal, PPI mereka adalah 326, yang merupakan ponsel yang sangat tinggi. Saat kami menulis halaman dengan lebar 320px dan menaruhnya di iPhone untuk ditampilkan, Anda akan menemukan bahwa itu sebenarnya lebar penuh. Ini karena halaman diperbesar dua kali secara default, yaitu 640px, sedangkan lebar iPhone 4 atau 4s persis 640px.

Gambar mengelilingi tipe kepadatan tinggi karena ini adalah data statistik ponsel Android. Di pasar telepon Android domestik, perangkat kepadatan tinggi menyumbang sebagian besar pangsa pasar. Ini adalah poin yang sangat penting dan juga merupakan poin kunci yang harus kita perhatikan saat melakukan webapps Android.

Viewport memiliki total 5 atribut, sebagai berikut:

<meta name = "viewport"

konten = "

tinggi = [pixel_value | tinggi perangkat],

width = [pixel_value | Perangkat lebar],

skala awal = float_value, skala minimum = float_value, skala maksimum = float_value, skala maksimum = float_value,

User-scalable = [ya | TIDAK] ,

target- densityDpi = [dpi_value | perangkat-dpi | tinggi-dpi | DPI sedang | rendah-dpi] " />

Di antara sifat-sifat ini, kami fokus pada target-densityDPI , yang dapat mengubah penskalaan default perangkat. DPI menengah adalah nilai default dari target-densityDPI. Jika kita mendefinisikan target-densityDPI = perangkat-dpi, perangkat akan membuat halaman sesuai dengan DPI nyata. Misalnya, jika gambar 320*480 ditempatkan di iPhone 4, itu akan menempati layar secara default, tetapi jika target-densityDPI = DVICE-DPI didefinisikan, maka gambar hanya menyumbang seperempat layar (setengah dari kotak) karena resolusi iPhone 4 adalah 640*960.

Jika kami membuat halaman sesuai dengan draft desain lebar 320px dan tidak membuat pengaturan apa pun, halaman akan secara otomatis skala ke lebar yang sama dengan layar ponsel secara default (ini karena DPI menengah adalah nilai default dari kepadatan target, dan ditentukan oleh rasio penskalaan yang berbeda dengan kepadatan yang berbeda, semua yang secara otomatis dilakukan. Jadi solusi ini sederhana, kasar dan efektif. Tapi ada kerugian yang fatal. Untuk perangkat seluler dengan kepadatan tinggi dan densitas tinggi, halaman (terutama gambar) akan terdistorsi, dan semakin padat semakin terdistorsi.

Dalam solusi ini, kami menggunakan target-densityDPI = Device-DPI, sehingga perangkat ponsel akan merender sesuai dengan jumlah nyata piksel. Dalam istilah profesional, itu adalah 1 piksel CSS = 1 piksel perangkat. Misalnya, untuk iPhone dengan 640*960, kami dapat membuat halaman dengan 640*960, dan tidak akan ada bilah gulir saat ditampilkan di iPhone. Tentu saja, untuk perangkat lain, halaman dengan ukuran yang berbeda juga diperlukan, sehingga solusi ini sering digunakan untuk menggunakan kueri media untuk membuat halaman yang responsif. Solusi ini dapat disajikan dengan sempurna pada resolusi tertentu, tetapi dengan resolusi yang lebih berbeda untuk kompatibel, semakin tinggi biaya, karena kode terpisah diperlukan untuk setiap resolusi. Berikut adalah contoh sederhana:

<meta name = "viewport" content = "target- densityDpi = device-dpi, width = perangkat lebar" />

#header {

latar belakang: url (medium-density-image.png);

}

@media layar dan (-webkit -device-pixel-ratio: 1.5) {

/ * CSS untuk layar kepadatan tinggi */

#header {latar belakang: url (high-density-image.png);}

}

layar @media dan (-webkit -device-pixel-ratio: 0.75) {

/ * CSS untuk layar rendah *//

#header {latar belakang: url (rendah density-image.png);}

Untuk sebagian besar perangkat Android, karakteristik kepadatan tinggi dan kepadatan menengah, kita dapat mengadopsi solusi kompromi: kita mengembalikan draf desain lebar 480px, tetapi sistem halaman dibuat ke lebar 320px (menggunakan ukuran latar belakang untuk mengurangi gambar), dan kemudian membiarkan halaman secara otomatis berskala. Dengan cara ini, telepon dengan kepadatan rendah memiliki bilah gulir (pada dasarnya tidak ada yang menggunakan telepon jenis ini), telepon kepadatan sedang akan menyia-nyiakan sedikit lalu lintas, telepon dengan kepadatan tinggi akan benar-benar hadir dengan sempurna, dan ponsel android dengan kepadatan tinggi akan sedikit terdistorsi (sangat sedikit ponsel android dengan kepadatan tinggi). Keuntungan dari solusi ini sangat jelas: hanya satu set draf desain dan satu set kode diperlukan (di sini hanya membahas situasi ponsel Android).