一、适配基础原则
移动端设备屏幕尺寸多样,需遵循以下原则:
- 使用相对单位:dp/pt而非px,适配不同分辨率
- 弹性布局:内容区域自适应,而非固定宽度/高度
- 关键内容优先:小屏幕下优先展示核心功能
- 测试多设备:至少测试主流尺寸(4.7/6.1/6.7英寸)
二、Android适配技巧
- 使用ConstraintLayout:灵活的约束布局,减少层级
- 适配不同尺寸文件夹:layout-sw320dp、layout-sw480dp等
- 使用dp单位:避免px,自动适配不同密度屏幕
- 多语言适配:预留文字扩展空间,避免文字溢出
三、iOS适配技巧
- AutoLayout自动布局:使用约束定义视图位置关系
- Size Classes:适配不同尺寸和方向的设备
- Safe Area:避开刘海屏、底部横条等系统区域
- Content Mode:设置图片的缩放模式,避免变形
四、跨平台适配技巧
Flutter/uni-app等跨平台框架适配:
- MediaQuery:获取屏幕尺寸和像素密度
- Flex布局:弹性布局适配不同屏幕
- 百分比布局:使用百分比定义视图大小
- 适配插件:使用社区成熟的适配插件(如flutter_screenutil)