web-gelistirme-sc.com

Web sayfaları için DPI'dan bağımsız kullanıcı arayüzü

Neredeyse on yıl boyunca, LCD norm haline gelmeden önce, ekranlar 72 veya 96 DPI idi (Genellikle sadece Trinitron ekranlarında bulunur) Ancak, şimdi 120 ve 144 DPI ekranlar oldukça yaygındır.

Windows 7'nin gelmesiyle, DPI sorunları masaüstü uygulamaları için bir dereceye kadar az ya da çok çözüldü ve en azından OS şeylerinin UI'si yüksek bir DPI ekranında asla bozulmadı.

Şimdi web sayfalarına geliyoruz - Bir arkadaşımla DPI'dan bağımsız bir web sayfası oluşturma konusunda büyük bir tartışmam vardı - Benim görüşüme göre, kullanıcı arayüzü öğelerinin çeşitli sistemlerde aynı boyutta görünmesi ve her CSS boyutunun piksel yerine inç olarak belirtilmesi gerekiyordu .

Bu konuyu SO) üzerinde büyüttüm ve inçleri birim olarak kullanma konusunda genel olarak onaylanmıyorum, oldukça makul buldum.

Sadece 15,4 inç boyutunda 144 DPI ekranım var - Tek tek piksellerin boyutu o kadar küçük ki metin kenar yumuşatma ve alt piksel oluşturma gerçekten etkili, ancak 8 puntoluk bir yazı tipinin herhangi birinde okunacak kadar büyük olduğunu varsayan birçok web sayfası görüyorum sistemi.

Bunun UI tasarımında büyük bir sıkıntı ve temel bir kusur olduğuna inanıyorum ... Mevcut ortama gerçekten uyum sağlayabildiğinizde kullanıcı ortamı hakkında varsayımlar yapmak.

1024x768 için tasarlandıkları için 1280x1024'te düzgün görüntülenmeyecek olan 2000'lerin ilk web sayfalarından çok farklı değil

Başka bir ironi, yalnızca firefox'un 1 inçlik bir öğeyi 1 fiziksel inç olarak oluşturmasıdır - ekran DPI'niz 96 olmadığı sürece diğer tüm tarayıcılar kapalıdır Kodda bir yerde 96 sabit kodlu değer bulunur - Bunu bir GetScreenDPI ile değiştirmek ne kadar zor ( ) veya API çağrısı ne olursa olsun?

Görüşleriniz neler?

6
rep_movsd

Pikseller donanım düzeyinde bir kavramdır ve daha fazla piksel daha az alana sıkıştıkça, tasarımcılar farklı bir ölçü birimi kullanmayı öğrenmek zorunda kalacaklar. Bir düğmeyi 100 × 200 piksel olacak şekilde tasarlarsam, 100 dpi ekran olduğunu varsaydığımda, düğmenin alanı since olacağı için 200 dpi ekranındaki bir kullanıcı zarar görür.

Yüksek piksel yoğunluklu ekranlarla daha fazla cihaz gönderildikçe, tasarımcılar, tasarladıkları sistemlerin teknik yönlerini biliyorlarsa, aslında daha fazla kontrole (ve esnekliğe) sahip olacaklar.

Örneğin, web düzenlerini noktalarda belirtmek, fiziksel boyutu belirttiğinizden (bahsettiğiniz uygulama hatalarının engellenmesi) daha geleceğe yöneliktir.

Başka bir örnek olarak, iOS cihazlarındaki ekran koordinatları nokta cinsinden ölçülür ve yeni yüksek yoğunluklu ekranı olmayan eski cihazlar için noktaların piksele bire bir eşleştirilmesi vardı. İPhone 4, piksel sayısını iki katına çıkarır, ancak ekranın nokta boyutu boyutlarını aynı tutar (bu nedenle eski düzenler yine de çalışır, ancak yeni düzenler daha yüksek konumsal doğruluk için kesirli boyutlar kullanabilir.)

5
Brendan Berg

Kullanıcı arayüzü tasarımı için yüzde kullanmanın daha iyi olduğunu düşünüyorum. Ardından, gövde etiketine mutlak değerler koyabilirsiniz. Javascript kullanarak gereken her yerde gövde mutlak değerlerini değiştirin. o zaman her şey tamam olacak.

Javascript bölümü için kullanıcı ekranını tanımayı ve değerleri hesaplamayı deneyin. bu kolay.

1
Morteza Milani

Hem grafik hem de ekran boyutları piksel cinsinden ölçüldüğünde neden inç kullanılır? Farklı çözünürlükler inç başına farklı piksel sayısı görüntüler, bu nedenle kenar boşlukları, dolgu, yazı tipi boyutları (pt'den daha iyi piksel veya em kullanmak daha iyi) için inç cinsinden ölçülürsek, resimlerimizin ne kadar büyük olduğunu ( piksel piksel yapıldığını) gösterir. 800x600 çözünürlüğünün her zaman ekranın kaç inç olduğu 800px x 600px ne olursa olsun olduğunu belirtmiyoruz.

Web geliştirme/tasarım uzmanı (veya guru) olmanın bir parçası, sitenizi mümkün olduğunca çok kullanıcının erişebilmesi için etkili bir şekilde nasıl oluşturacağınızı öğrenmektir. Bunun için gerekli teknikler yaygınlaşıyor ve kabul görüyor. Demek istediğim, eğer geliştirici orada iş yapıyorsa, sorun olmamalı. Ve bu, bu sitenin var olmasının nedenlerinden biri.

1
LoganGoesPlaces

birim tutarlılığı; gerçek inç. (72 puan bir inç yapar)

8 noktalı yazı tipi 8 pt'de kurtuluş mono'yu seviyorum ama bunun nedeni sadece küçük bir boyuta sahip çok iyi bir ızgara gibi görünüyor - bana göre bazı yazı tipleri ayrıntılarını gördüğünüzde garip görünüyor, ancak ince ızgara takılmış

1280x1024 (5: 4) ve 1024x768 (4: 3); küçükten büyüğe doğru ölçeklendirebilirsiniz, ancak daha büyük ekranı döndürmeniz gerekir ve bu ekranlar aynı boyutta olsaydı, bir inç düzeni değişmezdi, ancak yine de iki sorun var: biri ekran için metin düzenleme bilinmeyen boyut ve yazı tipi boyutunun doğru olması

bir sayfayı ekranınızın çözünürlüğüne göre değişmez hale getirebilirsiniz ancak ekranın boyutuna ve şekline göre değişmez hale getiremezsiniz

mupdf (bir pdf görüntüleyici) x11 altında sunucu gerçek boyutuna varsayılan olarak değiştirilmiş sunucu ekranın gerçek boyutunu ve xdpyinfo tarafından ekranım için bildirilen çözünürlüğünü şöyle sağlar:

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

(çalışma alanı boyutlarını istiyorsanız, Genişletilmiş Pencere Yöneticisi İpuçları tarafından tanımlanan bir özelliği okumalısınız: _NET_WORKAREA(CARDINAL) = 0, 25, 1280, 744)

ama ekranın çok kısa olduğunu ve pdf sayfalarında kaydırmak zorunda kaldığınız anlamına geldiğini fark ettim - disk belleği olan medyayı severim ama biri disk belleği ve kaydırmayı asla karıştırmamalı

ve sonra portre modu 21.5in lcd gibi bir mektup sayfasından daha kısa olmayan bir ekran almayı düşünmeye devam ettim (ancak 108'den fazla dpi aralığında 250'den fazla olmayan bir boyutta bir lcd bulmak zor bize)

1
Dan D.