Thích ứng với nhiều kích cỡ màn hình iPhone 12 khác nhau trên ứng dụng iOS

Giới thiệu

Như chúng ta đã biết, tại sự kiện vào tháng 10 năm 2020, Apple đã công bố bốn mẫu iPhone mới: iPhone 12 mini, iPhone 12, iPhone 12 Pro và iPhone 12 Pro Max. IPhone 12 và 12 Pro có độ phân giải màn hình giống hệt nhau và hoạt động giống hệt nhau. Vì vậy, chỉ có ba độ phân giải màn hình thực sự cần xem xét.

• iPhone 12 mini 5,4 "với 1080 × 2340 pixel
• iPhone 12/12 Pro 6.1 "với 1170 × 2532 pixel
• iPhone 12 Pro Max 6.7 "với 1284 × 2778 pixel

Không có độ phân giải nào trong số này tương ứng với các thiết bị hiện có. Trong bài viết này chúng ta cùng nhau so sánh các thiết bị hiện có là iPhone SE thế hệ thứ 2, 11 Pro và 11 Pro Max với các mẫu mới và chúng ta cũng xem xét cả tính năng Display Zoom (được Apple giới thiệu trên iOS 14) trong khi so sánh chúng. Cùng nhau bắt đầu nào!!!!

2nd Gen iPhone SE

iPhone SE thế hệ thứ hai có cùng kích thước và hoạt động tương tự như iPhone 6, 6s, 7 và 8.

Standard Zoom

iPhone SE thế hệ thứ hai có độ phân giải 375 × 667 points ở độ phân giải gốc.

Display Zoom

Khi bật tính năng Display Zoom, iPhone SE thế hệ thứ 2 hiển thị độ phân giải giống với iPhone SE thế hệ thứ nhất được phóng to lên 320 × 568 points. Đó là độ phân giải tương tự như iPhone 5 và 5S. Tuy nhiên, lưu ý rằng navigation bar có chiều cao là 112 points, cao hơn 1 point so với iPhone SE sử dụng thực tế.

iPhone 11 Pro

iPhone 11 Pro có cùng kích thước và hoạt động tương tự như iPhone X và XS.

Standard Zoom

iPhone 11 Pro có độ phân giải 375×812 points ở độ phân giải gốc.

Display Zoom

Khi bật tính năng Display Zoom, iPhone 11 Pro được phóng to lên 320×693 points khi app được build bằng Xcode 12 trở lên. Điều này không tương ứng với bất kỳ thiết bị nào trước đó. Lưu ý rằng cả top và bottom bar đều nhỏ hơn một chút so với kích thước ban đầu.

iPhone 11 Pro không hỗ trợ Display Zoom trên iOS 13. Khi được build với Xcode 11 (tức là được liên kết với iOS 13), iPhone 11 Pro với Display Zoom hiển thị iPhone SE 320 × 568 points. Điều này đảm bảo ứng dụng không nhìn thấy độ phân giải màn hình không tồn tại trên iOS 13. Ứng dụng cho rằng status bar cao 20 point (như trên iPhone SE thế hệ 1) nhưng iOS tiếp tục đặt thời gian và các chỉ số khác ở trên cùng của màn hình.

iPhone 11 Pro Max

iPhone 11 Pro Max có cùng kích thước và có hoạt động tương tự như iPhone XS Max. IPhone 11 và XR có kích thước vật lý hơi khác nhau và chỉ là 2x thay vì 3x, nhưng có cùng độ phân giải về điểm và có thể được coi là tương đương về mặt chức năng như iPhone 11 Pro Max.

Standard Zoom

iPhone 11 Pro Max có độ phân giải 414 × 896 points ở độ phân giải gốc. Chiều cao của Bar giống như trên iPhone 11 Pro.

Display Zoom

Khi bật tính năng Display Zoom, iPhone 11 Pro Max sẽ hiển thị độ phân giải của iPhone 11 Pro được phóng to lên 375 × 812 points. Không giống như iPhone 11 Pro, iPhone 11 Pro Max đã hỗ trợ tính năng Phóng to hiển thị trong iOS 13. Các ứng dụng được xây dựng bằng Xcode 11 sẽ có cùng độ phân giải của iPhone 11 Pro với các ứng dụng được xây dựng Xcode 12. Một lần nữa, thanh trên và dưới có kích thước hơi khác so với iPhone 11 Pro thực tế. Status bar ngắn hơn 4 point và bottom bar hơn 3 điểm, cho diện tích nội dung dọc nhiều hơn 7 point so với trên iPhone 11 Pro.

iPhone 12 mini

Standard Zooom

Màn hình 1080 × 2340 pixel sẽ đề xuất độ phân giải mới là 360 × 780 point, nhưng iPhone 12 mini thực sự cho thấy độ phân giải thu nhỏ của iPhone 11 Pro là 375 × 812 point. Điều này có nghĩa là iPhone 12 mini không giới thiệu độ phân giải mới. Tuy nhiên, vì màn hình vật lý thực tế tính bằng pixel không phải là bội số nguyên của độ phân giải tính bằng points nên sẽ luôn mở rộng. Với màn hình 3x, hy vọng chúng sẽ khó nhìn. Status bar cao hơn 6 point so với iPhone 11 Pro. Bottom bar có cùng chiều cao.

Display Zoom

Vì iPhone 12 mini đang hoạt động như thể nó là một chiếc iPhone 11 Pro, khi tính năng Display Zoom được bật, iPhone 12 mini sẽ hiển thị độ phân giải được phóng to lên là 320 × 693 points khi ứng dụng được xây dựng bằng Xcode 12.0 trở lên. Status bar cao hơn 5 points so với iPhone 11 Pro với Display Zoom. Bottom bar có cùng chiều cao.

iPhone 12 / 12 Pro

Standard Zoom

Không giống như iPhone 12 mini, the iPhone 12 và 12 Pro giới thiệu một độ phân giải mới 390x844 points cho độ phân giải gốc. Apps phải được build bẳng Xcode 12.1 trở đi để có thể nhìn thấy độ phân giải này. Ở chiều ngang, lưu ý rằng danh mục kích thước ngang là nhỏ gọn (giống như iPhone 11 Pro và các thiết bị nhỏ hơn). Thanh trạng thái đã tăng 3 điểm so với iPhone 11 Pro. Thanh dưới cùng là không thay đổi.

Display Zoom

Khi bật tính năng Display Zoom, iPhone 12 và 12 Pro hiển thị độ phân giải được phóng to lên là 320 × 693 points khi ứng dụng được tạo bằng Xcode 12.0 trở lên. Đây là độ phân giải tương tự như iPhone 11 Pro và iPhone 12 mini với Display Zoom. Status bar cao hơn 1 point so với iPhone 11 Pro tương đương với tính năng Display Zoom trong khi bottom bar ngắn hơn 1 point.

iPhone 12 Pro Max

Standard Zoom

Giống như iPhone 12 và 12 Pro, iPhone 12 Pro Max giới thiệu độ phân giải hoàn toàn mới 428 × 926 points phân giải gốc. Vì đây là độ phân giải mới nên các ứng dụng phải được xây dựng bằng Xcode 12.1 trở lên để xem được. Stutus bar cao hơn 3 điểm so với iPhone 11 Pro Max. Bottom bar là không thay đổi.

Ở chiều ngang, hãy lưu ý rằng danh mục kích thước ngang là bình thường (giống như iPhone 11 Pro Max).

Display Zoom

Khi bật tính năng Display Zoom, iPhone 12 Pro Max hiển thị độ phân giải của iPhone 11 Pro được phóng to lên 375 × 812 points. Status bar ngắn hơn 3 points và bottom bar ngắn hơn 4 điểm, cho diện tích nội dung dọc nhiều hơn 7 points so với trên iPhone 11 Pro.

Kết luận

Apple cung cấp cho chúng ta khả năng tương thích các ứng dụng với các thiết bị mới rất tuyệt vời, phạm vi iPhone 12 cũng không khác (ngoại trừ iPhone 12 mini, luôn có độ phân giải hợp lý của iPhone 11 Pro được thu nhỏ để lấp đầy màn hình của nó). Chiều cao thanh khi chia tỷ lệ không phải lúc nào cũng khớp với thiết bị gốc, vì vậy khả năng tương thích ngược không chính xác 100%. Để xem độ phân giải mới của iPhone 12/12 Pro và 12 Pro Max, các ứng dụng phải được build bằng Xcode 12.1.

Display Zoom thường hiển thị phiên bản được phóng to của độ phân giải nhỏ hơn của thiết bị hiện có. Ngoại lệ là kích thước iPhone X, XS và 11 Pro không hỗ trợ Display Zoom cho đến iOS 14. Chúng hiển thị độ phân giải mới là 320 × 693 points khi được xây dựng với Xcode 12 (tức là so với iOS 14) và một hộp chữ cái 320 × 568 points khi được xây dựng bằng Xcode 11.

Qua bài viết này chúng ta cũng có thể nhận thấy khi build bằng các version Xcode khác nhau thì độ hiển thị màn hình cũng sẽ khác nhau và khi thay đổi chế độ Display Zoom cũng tương tự, vì vậy khi phát triển với các thiết bị mới chúng ta cần phải chú ý đến việc này để cho giao diện không bị vỡ trên các màn hình.

Bài viết được dịch theo nguồn:

https://hacknicity.medium.com/how-ios-apps-adapt-to-the-various-iphone-12-screen-sizes-e45c021e1b8b