PostsMapsLinks
Cross Platform

Device Metrics

Understand how device pixels, points, and scale factor work together.

iPhone


The device screen may have lower pixel resolution than the image rendered in previous step. Before the image can be displayed, it must be downsampled (resized) to lower pixel resolution. Physical Pixels At the beginning, coordinates of all drawings are specified in Points are abstract units, they only make sense in this mathematical coordinate space. Points Point-based drawings are rendered into pixels. This process is known as rasterization. Point coordinates are multiplied by scale factor to get pixel coordinates. Higher scale factors result in higher level of detail. Rendered Pixels Finally, computed pixels are displayed on the physical screen. The PPI number tells you how many pixels fit into one inch and thus how large the pixels appear in the real world. Physical Device points. 320 × 480 3.5″ render at 1× (pixels) 2G, 3G, 3GS 3.5″ (points) 320 × 480 show at 163 PPI 320 × 480 640 × 960 3.5″ render at 2× (pixels) 4, 4s 3.5″ (points) show at 326 PPI 320 × 568 640×1136 5, 5s, 5c, SE render at 2× 4″ 4″ (points) (pixels) show at 326 PPI 375 × 667 750 × 1334 4.7″ render at 2× (points) (pixels) show at 326 PPI 4.7″ 375 × 812 1125 × 2436 5.8″ render at 3× (points) (pixels) show at 458 PPI 5.8″ 414 × 736 1242 × 2208 1080 × 1920 5.5″ show at 401 PPI (pixels) (points) (device pixels) 5.5″ render at 3× downsampling / 1.15 414 × 896 828 × 1792 6.1″ render at 2× (points) (pixels) show at 326 PPI 6.1″ 414 × 896 1242 × 2688 6.5″ render at 3× (points) (pixels) show at 458 PPI 6.5″

阅读更多

发布于2020年6月15日
更新于2025年3月16日

跨平台开发

跨平台开发技术与实践，包括 Flutter、Taro 等框架以及设备适配方案。

Flutter

Flutter 是 Google 开发的跨平台 UI 框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。

Copyright © 2024 Lionad - CC-BY-NC-CD-4.0