[设计向]iPhoneX适配推荐设置 V1.0.0

1. mugeda默认尺寸与 iphoneX屏幕尺寸

iPhoneX适配-02.png



2.横屏H5推荐设置

以木疙瘩默认尺寸(320*520)按宽度适配放大(至375*610), 会产生上57px/下23+34px的空白区域, 因此,如需保证左右图像完美, 建议设计尺寸为: 375 * 724并乘以倍率,一般建议2倍图即可, 同时注意上下各57乘以倍率的范围会在大多数非全面屏设备中被裁切, 因此不建议在此区域内放置重要元素, 或者将部分元素设置相对上下位置锁定(底边向上34px是iPhoneX Home条范围,因此,即便设置相对底边锁定位置,也要避开此区域)


结论: 此种方式建议横屏H5选用,建议设计尺寸为1448px*750px(含左右出血114px),分辨率72点,mugeda设置舞台尺寸724*375,高度适配水平居中。或等比缩放至1236*640px,618*320



iPhoneX适配-03.png



3.竖屏H5推荐设置

以木疙瘩默认尺寸(320*520)按高度适配放大(约445*724), 会产生左右各35px的超出区域, 因此,如需保证左右图像完美, 建议设计尺寸为: 445 * 724并乘以倍率,一般建议2倍图即可, 同时注意左右各35乘以倍率的范围会在大多数非全面屏设备中被裁切, 因此不建议在此区域内放置重要元素(底边向上34px是iPhoneX Home条范围,因此要避开此区域)


结论: 此种方式建议竖屏H5选用,建议设计尺寸为890px*1448px(含左右出血70px,下方出血68px),分辨率72点,mugeda设置舞台尺寸445*724,高度适配水平居中。或使用原舞台设置320*520,需注意出血(左右35px,下34px)



iPhoneX适配-04.png


 

0 个评论

要回复文章请先登录注册