---
description: 这里指的是页面内容需在手机一屏内完全显示的情况。
---

# 全屏页的多机型适配

### 如何保证刚好一屏的设计元素，在各机型都能显示完好？

如下图所示，会员卡展开前、展开后的效果。

<div align="left"><img src="https://2340458926-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lk2kHZrZmBk-2uLtHnZ%2F-LpSGkl531RLDtO3Twcq%2F-LpSL31BhYqmgn_BafL8%2Fimage.png?alt=media&#x26;token=8d0009c6-5512-489d-aec1-6ab8c91033ce" alt=""></div>

#### 展开后的区域分三块。

1. 会员卡区域
2. 间隙+支付按钮
3. 收起按钮+昵称

<div align="left"><img src="https://2340458926-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lk2kHZrZmBk-2uLtHnZ%2F-LpSGkl531RLDtO3Twcq%2F-LpSMhpFrwIamzMLuLJQ%2Fimage.png?alt=media&#x26;token=6f96fbd8-9938-4623-aee0-c56ba71e8ece" alt=""></div>

#### 倘若按照普通的标注方法，定死会员卡的大小尺寸，2、3部分顺延排列。 则有可能出现如下情况。

小屏机内容显示不完全；大屏机留白过多。

<div align="left"><img src="https://2340458926-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lk2kHZrZmBk-2uLtHnZ%2F-LpSSwe9rbf2KXvxp2Gh%2F-LpSSxWxKFFNhCStymLT%2Fimage.png?alt=media&#x26;token=f3028352-544b-4462-9b81-cb0f667b14c3" alt="小屏机内容显示不完全；大屏机留白过多。"></div>

#### 此时可尝试将第3部分的“收起+昵称“区域，以下间距为准定位。那么一定不会飘出屏幕外了。

![](https://2340458926-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lk2kHZrZmBk-2uLtHnZ%2F-LpaW1nv46oaFqBRRA_n%2F-LpaW4AOveauplOd7l3d%2Fimage.png?alt=media\&token=f87a15af-328d-4a6a-a457-85b9b3bfeb83)

#### 嗯这样能解决第三部分的显示问题，不会超出屏幕外了。

#### 但，中间夹住的间隙部分，会有可能不够空间。（如下图）

<div align="left"><img src="https://2340458926-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lk2kHZrZmBk-2uLtHnZ%2F-LpSQfEXm0hEgFG6m1nB%2F-LpSSNtkLSTl_HrPhKOO%2Fimage.png?alt=media&#x26;token=495be089-1f0a-43ce-b99c-8b79dd77b983" alt=""></div>

**因此，除了第三部分标注以下间距定位以外，会员卡的部分，也需要按照屏幕尺寸等比例缩放。**

<div align="left"><img src="https://2340458926-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lk2kHZrZmBk-2uLtHnZ%2F-LpW43g5PXfOv83pbIk3%2F-LpW45iYDKmV6a2DPhAG%2Fimage.png?alt=media&#x26;token=c0f5c407-5d59-4a23-a25c-11e5ebbe2151" alt=""></div>

选定的标准机型需要选择最普适，中间大小的机型，如iphone 8 plus，对比下大机型不会长太多，留有间隙即可。\
若会员卡的底色为纯色或者规律底纹（非图案），**也可以不一定等比例缩放，仅调整卡片高度即可**（这样里面的文案icon需要根据卡片标注，不能跟随完整切图，稍微麻烦些，但效果更好）



#### 综上，底部的模块采用下间距定位，主要模块采用等比自适应的方式，根据屏幕大小调整模块尺寸。 即能保证元素在一屏内，各个机型都显示得完好正常。

2019/9/23
