it-swarm-id.com

UI independen DPI untuk laman web

Selama hampir satu dekade, sebelum LCD menjadi norma, layar yang digunakan adalah 72 atau 96 DPI (Biasanya hanya ditemukan di layar Trinitron) .Namun, sekarang 120 dan 144 tampilan DPI cukup umum.

Dengan kedatangan Windows 7, masalah DPI sedikit banyak diselesaikan untuk aplikasi desktop, dan setidaknya UI dari hal-hal OS tidak pernah rusak pada layar DPI tinggi.

Sekarang kita sampai pada halaman web - Saya punya argumen besar dengan seorang teman tentang membangun halaman web independen DPI - Pandangan saya adalah bahwa elemen UI harus terlihat ukuran yang sama pada berbagai sistem, dan bahwa setiap dimensi CSS harus ditentukan dalam inci daripada piksel. .

Saya mengangkat topik ini pada SO dan ada ketidaksetujuan umum tentang menggunakan inci sebagai unit, yang saya temukan agak-tidak- masuk akal.

Saya memiliki layar 144 DPI dengan ukuran hanya 15,4 inci - Ukuran piksel individu sangat kecil sehingga antialiasing teks dan rendering subpiksel benar-benar efektif, tetapi saya melihat banyak halaman web yang menganggap bahwa font 8 titik cukup besar untuk dibaca pada semua sistem.

Saya percaya bahwa ini adalah gangguan besar dan cacat mendasar dalam desain UI ... Membuat asumsi tentang lingkungan pengguna ketika Anda benar-benar dapat menyesuaikan diri dengan yang ada.

Ini tidak jauh berbeda dari halaman web awal di tahun 2000-an yang tidak akan ditampilkan dengan benar pada 1280x1024 karena dirancang untuk 1024x768

Ironi lainnya adalah hanya firefox yang membuat elemen 1 inci sebagai 1 inci fisik - semua browser lainnya mati kecuali DPI layar Anda 96 Jelas di suatu tempat dalam kode adalah nilai 96 hardcoded - Seberapa sulit untuk menggantinya dengan GetScreenDPI ( ) atau panggilan API apa pun?

Apa pandanganmu

6
rep_movsd

Piksel adalah konsep tingkat perangkat keras, dan karena lebih banyak piksel yang dijejalkan ke ruang yang lebih sedikit, perancang harus belajar menggunakan unit pengukuran yang berbeda. Jika saya mendesain tombol menjadi 100 × 200 piksel, karena saya menganggap layar 100dpi, pengguna di layar 200dpi akan menderita karena tombol akan memiliki ¼ area.

Ketika lebih banyak perangkat dikirimkan dengan layar dengan kerapatan piksel tinggi, desainer sebenarnya akan memiliki lebih banyak kontrol (dan fleksibilitas) jika mereka mengetahui aspek teknis dari sistem yang mereka desainkan.

Misalnya, menentukan tata letak web dalam poin lebih tahan di masa depan karena Anda menentukan ukuran fisiknya (kecuali bug implementasi yang Anda sebutkan).

Sebagai contoh lain, koordinat layar di perangkat iOS diukur dalam poin, dan untuk perangkat yang lebih lama tanpa layar high-density baru, ada pemetaan satu-ke-satu dari titik ke piksel. IPhone 4 menggandakan jumlah piksel tetapi menjaga dimensi ukuran titik layar tetap sama (sehingga tata letak lama tetap berfungsi, tetapi tata letak baru dapat menggunakan dimensi fraksional untuk akurasi posisi lebih tinggi.)

5
Brendan Berg

Saya pikir lebih baik menggunakan persen untuk merancang UI. Kemudian Anda dapat memasukkan nilai absolut dalam tag tubuh. Ubah nilai absolut tubuh di mana saja yang diperlukan menggunakan javascript. maka Anda akan memiliki segalanya OK.

Untuk bagian javascript, cobalah mengenali tampilan pengguna dan menghitung nilai. mudah.

1
Morteza Milani

Mengapa menggunakan inci ketika ukuran grafik dan layar diukur dalam piksel? Resolusi yang berbeda menampilkan jumlah piksel per inci yang berbeda, jadi jika kami mengukur dalam inci untuk margin, padding, ukuran font (lebih baik menggunakan px atau em daripada pt), dll. Akan lebih sulit untuk mengetahui seberapa besar gambar kami (yang merupakan dibuat pixel demi pixel) akan ada di halaman. Belum lagi bahwa resolusi 800x600 selalu 800px x 600px terlepas berapa inci layarnya.

Bagian dari menjadi profesional pengembangan web/desain (atau guru) adalah belajar bagaimana membangun situs Anda secara efektif sehingga sebanyak mungkin pengguna dapat mengaksesnya. Dan teknik yang diperlukan untuk itu menjadi tersebar luas dan diterima. Maksud saya adalah, jika pengembang melakukan pekerjaan di sana, itu seharusnya tidak menjadi masalah. Dan itulah salah satu alasan mengapa situs ini ada.

1
LoganGoesPlaces

konsistensi unit; inci nyata. (72 poin menghasilkan satu inci)

8 poin font saya suka pembebasan mono pada 8 pt tapi itu hanya karena itu terlihat grid yang begitu baik dipasang pada ukuran kecil - bagi saya beberapa font hanya terlihat aneh ketika Anda melihat detail mereka tetapi terlihat grid baik dipasang

1280x1024 (5: 4) dan 1024x768 (4: 3); Anda dapat mengatur skala dari yang lebih kecil ke yang lebih besar tetapi Anda harus memutar layar yang lebih besar dan jika layar ini memiliki ukuran yang sama, tata letak inci akan bekerja tidak berubah tetapi masih ada dua masalah: satu meletakkan teks untuk layar ukuran tidak diketahui dan mendapatkan ukuran font yang tepat

anda dapat membuat halaman invarian dengan resolusi layar Anda tetapi Anda tidak dapat membuatnya halaman dengan ukuran dan bentuk layar yang berbeda

saya memodifikasi mupdf (penampil pdf) ke default ke ukuran sebenarnya karena di bawah x11 server memberikan ukuran sebenarnya dari layar dan resolusinya dilaporkan untuk layar saya oleh xdpyinfo sebagai:

dimensions:    1280x800 pixels (301x192 millimeters)
resolution:    108x106 dots per inch

(walaupun jika Anda ingin dimensi area kerja Anda harus membaca properti yang ditentukan oleh Petunjuk Extended Window Manager: _NET_WORKAREA(CARDINAL) = 0, 25, 1280, 744)

tetapi saya menemukan bahwa layar terlalu pendek dan itu berarti Anda harus menggulir halaman pdf - saya lebih suka media halaman tetapi orang tidak boleh mencampur paging dan scrolling

dan kemudian saya mulai berpikir tentang mendapatkan layar yang tidak lebih pendek dari halaman surat seperti mode potret 21.5in lcd (tapi sulit untuk menemukan lcd ukuran itu dalam kisaran 108+ dpi untuk tidak lebih dari 250 kami)

1
Dan D.