(lỗi thời) Bảng tính số liệu thiết bị.
CŨNG XEM:
Chỉ số thiết bị - Thiết kế vật liệu .
Kích thước màn hình .
--------------------------- ----- ------------ --------------- ------- ----------- ---------------- --- ----------
Device Inches ResolutionPX Density DPI ResolutionDP AspectRatios SysNavYorN ContentResolutionDP
--------------------------- ----- ------------ --------------- ------- ----------- ---------------- --- ----------
Galaxy Y 320 x 240 ldpi 0.75 120 427 x 320 4:3 1.3333 427 x 320
? 400 x 240 ldpi 0.75 120 533 x 320 5:3 1.6667 533 x 320
? 432 x 240 ldpi 0.75 120 576 x 320 9:5 1.8000 576 x 320
Galaxy Ace 480 x 320 mdpi 1 160 480 x 320 3:2 1.5000 480 x 320
Nexus S 800 x 480 hdpi 1.5 240 533 x 320 5:3 1.6667 533 x 320
"Galaxy SIII Mini" 800 x 480 hdpi 1.5 240 533 x 320 5:3 1.6667 533 x 320
? 854 x 480 hdpi 1.5 240 569 x 320 427:240 1.7792 569 x 320
Galaxy SIII 1280 x 720 xhdpi 2 320 640 x 360 16:9 1.7778 640 x 360
Galaxy Nexus 1280 x 720 xhdpi 2 320 640 x 360 16:9 1.7778 640 x 360
HTC One X 4.7" 1280 x 720 xhdpi 2 320 640 x 360 16:9 1.7778 640 x 360
Nexus 5 5" 1920 x 1080 xxhdpi 3 480 640 x 360 16:9 1.7778 YES 592 x 360
Galaxy S4 5" 1920 x 1080 xxhdpi 3 480 640 x 360 16:9 1.7778 640 x 360
HTC One 5" 1920 x 1080 xxhdpi 3 480 640 x 360 16:9 1.7778 640 x 360
Galaxy Note III 5.7" 1920 x 1080 xxhdpi 3 480 640 x 360 16:9 1.7778 640 x 360
HTC One Max 5.9" 1920 x 1080 xxhdpi 3 480 640 x 360 16:9 1.7778 640 x 360
Galaxy Note II 5.6" 1280 x 720 xhdpi 2 320 640 x 360 16:9 1.7778 640 x 360
Nexus 4 4.4" 1200 x 768 xhdpi 2 320 600 x 384 25:16 1.5625 YES 552 x 384
--------------------------- ----- ------------ --------------- ------- ----------- ---------------- --- ----------
Device Inches ResolutionPX Density DPI ResolutionDP AspectRatios SysNavYorN ContentResolutionDP
--------------------------- ----- ------------ --------------- ------- ----------- ---------------- --- ----------
? 800 x 480 mdpi 1 160 800 x 480 5:3 1.6667 800 x 480
? 854 x 480 mdpi 1 160 854 x 480 427:240 1.7792 854 x 480
Galaxy Mega 6.3" 1280 x 720 hdpi 1.5 240 853 x 480 16:9 1.7778 853 x 480
Kindle Fire HD 7" 1280 x 800 hdpi 1.5 240 853 x 533 8:5 1.6000 853 x 533
Galaxy Mega 5.8" 960 x 540 tvdpi 1.33333 213.333 720 x 405 16:9 1.7778 720 x 405
Sony Xperia Z Ultra 6.4" 1920 x 1080 xhdpi 2 320 960 x 540 16:9 1.7778 960 x 540
Blackberry Priv 5.43" 2560 x 1440 ? 540 ? 16:9 1.7778
Blackberry Passport 4.5" 1440 x 1440 ? 453 ? 1:1 1.0
Kindle Fire (1st & 2nd gen) 7" 1024 x 600 mdpi 1 160 1024 x 600 128:75 1.7067 1024 x 600
Tesco Hudl 7" 1400 x 900 hdpi 1.5 240 933 x 600 14:9 1.5556 933 x 600
Nexus 7 (1st gen/2012) 7" 1280 x 800 tvdpi 1.33333 213.333 960 x 600 8:5 1.6000 YES 912 x 600
Nexus 7 (2nd gen/2013) 7" 1824 x 1200 xhdpi 2 320 912 x 600 38:25 1.5200 YES 864 x 600
Kindle Fire HDX 7" 1920 x 1200 xhdpi 2 320 960 x 600 8:5 1.6000 960 x 600
? 800 x 480 ldpi 0.75 120 1067 x 640 5:3 1.6667 1067 x 640
? 854 x 480 ldpi 0.75 120 1139 x 640 427:240 1.7792 1139 x 640
Kindle Fire HD 8.9" 1920 x 1200 hdpi 1.5 240 1280 x 800 8:5 1.6000 1280 x 800
Kindle Fire HDX 8.9" 2560 x 1600 xhdpi 2 320 1280 x 800 8:5 1.6000 1280 x 800
Galaxy Tab 2 10" 1280 x 800 mdpi 1 160 1280 x 800 8:5 1.6000 1280 x 800
Galaxy Tab 3 10" 1280 x 800 mdpi 1 160 1280 x 800 8:5 1.6000 1280 x 800
ASUS Transformer 10" 1280 x 800 mdpi 1 160 1280 x 800 8:5 1.6000 1280 x 800
ASUS Transformer 2 10" 1920 x 1200 hdpi 1.5 240 1280 x 800 8:5 1.6000 1280 x 800
Nexus 10 10" 2560 x 1600 xhdpi 2 320 1280 x 800 8:5 1.6000 1280 x 800
Galaxy Note 10.1 10" 2560 x 1600 xhdpi 2 320 1280 x 800 8:5 1.6000 1280 x 800
--------------------------- ----- ------------ --------------- ------- ----------- ---------------- --- ----------
Device Inches ResolutionPX Density DPI ResolutionDP AspectRatios SysNavYorN ContentResolutionDP
--------------------------- ----- ------------ --------------- ------- ----------- ---------------- --- ----------
Đối phó với các tỷ lệ khung hình khác nhau
Các tỷ lệ khung hình khác nhau được thấy ở trên là (từ hầu hết bình phương; h / w):
1:1 1.0 <- rare for phone; common for watch
4:3 1.3333 <- matches iPad (when portrait)
3:2 1.5000
38:25 1.5200
14:9 1.5556 <- rare
25:16 1.5625
8:5 1.6000 <- aka 16:10
5:3 1.6667
128:75 1.7067
16:9 1.7778 <- matches iPhone 5-7
427:240 1.7792 <- rare
37:18 2.0555 <- Galaxy S8
Nếu bạn bỏ qua các tỷ lệ khung hình cực đoan, hiếm khi thấy ở kích thước điện thoại hoặc lớn hơn, tất cả các thiết bị khác đều nằm trong phạm vi từ 1,3333 đến 1,7778, phù hợp với tỷ lệ iPhone / iPad hiện tại (xem xét tất cả các thiết bị ở chế độ dọc) . Lưu ý rằng có khá nhiều biến thể trong phạm vi đó, vì vậy nếu bạn đang tạo một số lượng nhỏ bố cục tỷ lệ khung hình cố định, bạn sẽ cần quyết định cách xử lý các màn hình "ở giữa" kỳ lạ.
Giải pháp "chế độ dọc" tối thiểu là hỗ trợ 1.3333, dẫn đến không gian không được sử dụng ở trên cùng và dưới cùng, trên tất cả các độ phân giải có tỷ lệ khung hình lớn hơn.
Rất có thể, thay vào đó bạn sẽ thiết kế nó trải dài trên phạm vi 1,333 đến 1,778. Nhưng đôi khi một phần thiết kế của bạn trông quá méo mó.
Ý tưởng bố cục nâng cao:
Đối với văn bản, bạn có thể thiết kế cho 1.3333, sau đó tăng khoảng cách dòng cho 1.666 - mặc dù điều đó sẽ trông khá thưa thớt. Đối với đồ họa, hãy thiết kế cho một tỷ lệ trung bình , sao cho trên một số màn hình hơi bị bẹp, trên một số màn hình khác thì hơi bị kéo căng. trung bình hình học của Sqrt (1333 x 1667) ~ = 1491. Vì vậy, bạn thiết kế cho 1491 x 1000, sẽ bị kéo giãn / bóp méo + -12% khi được gán cho các trường hợp cực đoan.
Cải tiến tiếp theo là thiết kế bố cục như một chồng các "dải" chiều cao khác nhau mà mỗi dải sẽ lấp đầy chiều rộng của màn hình . Sau đó, xác định vị trí bạn có thể "kéo căng hoặc ép" chiều cao của dây đeo một cách hài lòng nhất, để điều chỉnh cho các tỷ lệ khác nhau.
Ví dụ: hãy xem xét điện thoại tưởng tượng có 1333 x 1000 pixel và 1666 x 1000 pixel. Giả sử bạn có hai "dải" và "dải" chính của bạn là hình vuông, vì vậy nó là 1000 x 1000. Băng thứ hai là 333 x 1000 trên một màn hình, 666 x 1000 trên màn hình khác - một phạm vi khá để thiết kế.
Bạn có thể quyết định rằng băng tần chính của mình trông ổn khi được thay đổi 10% lên hoặc xuống và thu nhỏ nó thành 900 x 1000 trên màn hình 1333 x 1000, để lại 433 x 1000. Sau đó, kéo dài nó thành 1100 x 1000 trên màn hình 1666 x 1000, để lại 566 x 1000. Vì vậy, dải thứ hai của bạn bây giờ chỉ cần điều chỉnh trên 433 đến 566, có giá trị trung bình hình học là Sqrt (433 x 566) ~ = 495. Vì vậy, bạn thiết kế cho 495 x 1000, dải này sẽ bị kéo giãn / bóp méo + -14 % khi được gán cho các trường hợp cực đoan.