Thiết kế web cho điện thoại thông minh - Kích thước pixel

Question

Tôi cần ai đó giúp làm rõ sự hiểu biết của mình về kích thước pixel trên điện thoại mới có màn hình có mật độ cao. Kể từ đó, nó ném một quả bóng đường cong vào thiết kế web của tôi.

Sự hiểu biết ban đầu của tôi về điện thoại thông minh là kích thước pixel xấp xỉ 480 x 320, giúp thiết kế dễ dàng vì pixel vẫn là cùng một pixel.

Tuy nhiên, một số điện thoại thông minh có gấp đôi (hoặc nhiều hơn) so với điều này. Tôi tin rằng iPhone thực sự là gấp đôi ở mức 960 x 640. My Galaxy Nexus là 1280 x 720.

Bây giờ, điều này chỉ hoạt động tốt khi sử dụng% 's. Tuy nhiên, có rất nhiều điều tôi muốn sử dụng giá trị sửa lỗi cho. Ví dụ: nhiều giá trị độ cao không cần phải ở trong% s. Ngoài ra, nếu chiều cao cố định, một số mục, như biểu trưng, ​​biểu tượng, một số hình ảnh, tôi sẽ không muốn bị kéo dài khi chiều rộng mở rộng ... vì vậy chúng sẽ cần giá trị nhất quán.

Tuy nhiên, làm cách nào để xử lý việc này khi pixel không thực sự là một phép đo vật lý nhất quán?

Sẽ dễ dàng hơn khi sử dụng một ví dụ, vì vậy nếu ai đó có thể giải thích điều đó cho tôi, hãy nói biểu tượng làm ví dụ.

Khi tôi đăng nhập vào Facebook trên điện thoại của mình, tôi thấy ba biểu tượng thông báo đó trong thanh điều hướng (yêu cầu kết bạn, tin nhắn và nội dung khác). Đây là những cố định. Cho dù tôi có điện thoại thẳng đứng hay ở bên cạnh, chúng vẫn ở cùng kích cỡ. Chỉ có thay đổi với chiều rộng là khoảng trống giữa ... về cơ bản những gì tôi đang làm việc.

Đo lường trên các biểu tượng này là gì? Đối với một, tôi biết biểu tượng tiêu chuẩn thường là 16x16. Vì vậy, họ sẽ cần phải được 32x32 trên các điện thoại thông minh mật độ cao? Tuy nhiên, chúng cũng không có kích thước giống như các biểu tượng 16x16 mà tôi thấy trên màn hình nền của mình. Họ trông có vẻ nhiều hơn 12x12. Vì vậy, không chắc chắn, nhưng tôi nghĩ rằng có một kích thước biểu tượng "tiêu chuẩn" khác nhau cho điện thoại thông minh sau đó cho máy tính để bàn (những gì sẽ được?).

Dù sao, tôi đã có CSS ​​xác định rằng điện thoại di động đang được sử dụng để đạt được bố cục di động của tôi. Tuy nhiên, tôi phải đi thêm một bước nữa để nhận ra mật độ điểm ảnh và sau đó điều chỉnh các giá trị cố định của mình, trong trường hợp này, tăng gấp đôi? Hoặc có cách nào khác/tốt hơn không?

Bất kỳ và tất cả trợ giúp đều được đánh giá cao. Tôi hơi bối rối và thực sự không có nhiều thông tin về điều này. Cảm ơn và xin lỗi vì bài đăng dài!

Answer 1

Danh sách mật độ điểm ảnh cho thiết bị: http://www.binvisions.com/articles/tablet-smartphone-resolutions-screen-size-list/ vấn đề của bạn có thể là sự thay đổi về tỷ lệ.

Đây là một bài viết tốt đẹp bao gồm một số nghiên cứu đáp ứng mà cá nhân tôi thích để tham khảo

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Bỏ qua đến cùng; ví dụ màn hình iPhone 4 Retina là gấp đôi mật độ điểm ảnh và đây là ví dụ từ bài viết nhắm mục tiêu ở trên nó (chưa thử nghiệm) http://thomasmaier.me/blog/2010/06/23/css-for-iphone-4-retina-display/

và một bài viết khác cung cấp thông tin về việc phải tạo 2 hình ảnh với ppi khác nhau http://bjango.com/articles/designingforretina/

cá nhân tôi sử dụng Twitter Bootstrap & Plugin Responsive của nó đối với cách bố trí của các thiết kế sử dụng CSS: http://twitter.github.com/bootstrap/scaffolding.html#responsive