it-swarm-vi.tech

UI độc lập DPI cho các trang web

Trong gần một thập kỷ, trước khi LCD trở thành chuẩn mực, màn hình được sử dụng là 72 hoặc 96 DPI (Thường chỉ được tìm thấy trên màn hình Trinitron). Tuy nhiên, hiện nay màn hình 120 và 144 DPI khá phổ biến.

Với sự xuất hiện của Windows 7, các vấn đề DPI ít nhiều được giải quyết ở một mức độ nào đó cho các ứng dụng trên máy tính để bàn và ít nhất giao diện người dùng của hệ điều hành không bao giờ bị hỏng trên màn hình DPI cao.

Bây giờ chúng ta đến các trang web - Tôi đã có một cuộc tranh luận lớn với một người bạn về việc xây dựng một trang web độc lập DPI - Quan điểm của tôi là các thành phần UI sẽ có cùng kích thước trên các hệ thống khác nhau và mọi kích thước CSS phải được chỉ định bằng inch thay vì pixel .

Tôi đã nêu ra chủ đề này trên SO và có sự không tán thành chung về việc sử dụng inch làm đơn vị, điều mà tôi thấy khá hợp lý.

Tôi có màn hình 144 DPI chỉ có kích thước 15,4 inch - Kích thước của từng pixel nhỏ đến mức khử răng cưa văn bản và hiển thị pixel phụ thực sự hiệu quả, nhưng tôi thấy rất nhiều trang web cho rằng phông chữ 8 điểm đủ lớn để đọc trên bất kỳ hệ thống.

Tôi tin rằng đây là một sự phiền toái lớn và là một lỗ hổng cơ bản trong thiết kế giao diện người dùng ... Đưa ra các giả định về môi trường người dùng khi bạn thực sự có thể điều chỉnh theo hiện tại.

Nó không khác lắm so với các trang web đầu thập niên 2000 không hiển thị đúng trên 1280x1024 vì chúng được thiết kế cho 1024x768

Một điều trớ trêu khác là chỉ firefox biến phần tử 1 inch thành 1 inch vật lý - tất cả các trình duyệt khác đều bị tắt trừ khi DPI màn hình của bạn là 96 Rõ ràng ở đâu đó trong mã là giá trị 96 được mã hóa cứng - Nó khó thay thế bằng GetScreenDPI ( ) hoặc bất kỳ lệnh gọi API nào?

Quan điểm của bạn là gì?

6
rep_movsd

Pixel là một khái niệm cấp độ phần cứng và khi nhiều pixel hơn được nhồi nhét vào ít không gian hơn, các nhà thiết kế sẽ phải học cách sử dụng một đơn vị đo lường khác. Nếu tôi thiết kế một nút có kích thước 100 × 200 pixel, vì tôi giả sử màn hình 100dpi, người dùng trên màn hình 200dpi sẽ bị ảnh hưởng vì nút sẽ có diện tích.

Khi nhiều thiết bị xuất xưởng với màn hình mật độ pixel cao, các nhà thiết kế thực sự sẽ có nhiều quyền kiểm soát (và linh hoạt hơn) nếu họ biết các khía cạnh kỹ thuật của các hệ thống mà họ đang thiết kế.

Ví dụ: việc chỉ định bố cục web theo điểm sẽ chứng minh tương lai hơn vì bạn chỉ định kích thước vật lý (chặn các lỗi triển khai bạn đã đề cập).

Một ví dụ khác, tọa độ màn hình trong các thiết bị iOS được đo bằng điểm và đối với các thiết bị cũ hơn không có màn hình mật độ cao mới, có một ánh xạ một đến một điểm thành pixel. IPhone 4 nhân đôi số pixel nhưng vẫn giữ nguyên kích thước kích thước điểm của màn hình (vì vậy bố cục cũ vẫn hoạt động, nhưng bố cục mới có thể sử dụng kích thước phân đoạn để có độ chính xác vị trí cao hơn.)

5
Brendan Berg

Tôi nghĩ sẽ tốt hơn nếu sử dụng phần trăm cho thiết kế UI. Sau đó, bạn có thể đặt giá trị tuyệt đối trong thẻ cơ thể. Thay đổi giá trị tuyệt đối của cơ thể ở mọi nơi cần thiết bằng cách sử dụng javascript. sau đó bạn sẽ có mọi thứ khác OK.

Đối với phần javascript, hãy cố gắng nhận ra người dùng hiển thị và tính toán các giá trị. dễ thôi.

1
Morteza Milani

Tại sao sử dụng inch khi cả kích thước đồ họa và màn hình được đo bằng pixel? Các độ phân giải khác nhau hiển thị số pixel khác nhau trên mỗi inch, do đó, nếu chúng tôi đo bằng inch cho lề, đệm, kích thước phông chữ (tốt hơn để sử dụng px hoặc em so với pt), v.v. tạo pixel theo pixel) sẽ có trên trang. Chưa kể độ phân giải 800x600 luôn là 800px x 600px không phân biệt màn hình có bao nhiêu inch.

Một phần của việc trở thành một chuyên gia thiết kế/phát triển web (hoặc guru) là học cách xây dựng trang web của bạn một cách hiệu quả để càng nhiều người dùng càng có thể truy cập nó. Và các kỹ thuật cần thiết để làm như vậy đang trở nên phổ biến rộng rãi và được chấp nhận. Quan điểm của tôi, nếu nhà phát triển đang làm công việc đó, thì đó không phải là vấn đề. Và đó là một trong những lý do trang web này tồn tại.

1
LoganGoesPlaces

thống nhất đơn vị; inch thực. (72 điểm làm cho một inch)

Phông chữ 8 điểm tôi yêu thích đơn sắc giải phóng ở 8 pt nhưng điều đó chỉ bởi vì nó trông rất tốt được trang bị ở kích thước nhỏ như vậy - với tôi một số phông chữ trông lạ khi bạn nhìn thấy chi tiết của chúng nhưng nhìn lưới được trang bị tốt

1280x1024 (5: 4) và 1024x768 (4: 3); bạn có thể chia tỷ lệ tốt từ nhỏ hơn sang lớn hơn nhưng bạn phải xoay màn hình lớn hơn và nếu các màn hình này có cùng kích thước, bố cục inch sẽ không thay đổi nhưng vẫn có hai vấn đề: một văn bản đặt ra cho màn hình kích thước không xác định và kích thước phông chữ đúng

bạn có thể tạo một trang bất biến cho độ phân giải của màn hình nhưng bạn không thể làm cho nó bất biến về kích thước và hình dạng của màn hình

tôi đã sửa đổi mupdf (trình xem pdf) thành mặc định thành kích thước thực như dưới x11, máy chủ cung cấp kích thước thật của màn hình và độ phân giải được báo cáo cho màn hình của tôi bởi xdpyinfo là:

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

(mặc dù nếu bạn muốn kích thước vùng làm việc, bạn phải đọc một thuộc tính được xác định bởi Gợi ý của Trình quản lý cửa sổ mở rộng: _NET_WORKAREA(CARDINAL) = 0, 25, 1280, 744)

nhưng tôi thấy rằng màn hình quá ngắn và điều đó có nghĩa là bạn phải cuộn trong các trang pdf - tôi thích phương tiện phân trang hơn nhưng người ta không bao giờ nên trộn lẫn phân trang và cuộn

và sau đó tôi đã nghĩ về việc có được một màn hình không ngắn hơn một trang chữ cái như màn hình LCD 21,5 inch ở chế độ chân dung (nhưng thật khó để tìm thấy một màn hình LCD có kích thước đó trong phạm vi 108+ dpi không quá 250 chúng ta)

1
Dan D.