移动端如何做适配（移动端如何做适配程序）

大家好！今天让创意岭的小编来大家介绍下关于移动端如何做适配的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。

开始之前先推荐一个非常厉害的Ai人工智能工具，一键生成原创文章、方案、文案、工作计划、工作报告、论文、代码、作文、做题和对话答疑等等

只需要输入关键词，就能返回你想要的内容，越精准，写出的就越详细，有微信小程序端、在线网页版、PC客户端

官网：https://ai.de1919.com。

创意岭作为行业内优秀的企业，服务客户遍布全球各地，如需了解SEO相关业务请拨打电话175-8598-2043，或添加微信：1454722008

本文目录:

• 1、移动端如何实现胖手机和瘦手机的上下布局适配

• 2、移动端app设计以什么尺寸作为视觉稿作为适配

• 3、移动端兼容性测试怎么做？

• 4、rem 与 vw 适配方案

一、移动端如何实现胖手机和瘦手机的上下布局适配

使用媒体查询。

可以使用媒体查询（mediaquery）来实现，它可以根据设备的特性，按照不同的方式来渲染不同的样式。

它可以用来实现响应式布局，根据不同的屏幕尺寸来调整布局，从而满足胖手机和瘦手机的布局要求。

二、移动端app设计以什么尺寸作为视觉稿作为适配

加上Android生态中纷繁复杂的各种奇葩尺寸，现在APP设计开发必须考虑适配大、中、小三种屏幕。所以如何做到交付一套设计稿解决适配大中小三屏的问题？设计和开发之间采用什么协作模式？一个基本思路是：

1、选择一种尺寸作为设计和开发基准；

2、定义一套适配规则，自动适配剩下两种尺寸；

3、特殊适配效果给出设计效果。

手机淘宝的iPhone 6/iPhone 6 Plus适配版本即将提交App store审核。先晒一下我们采用的协作模式，再慢慢说明原委。

第一步，视觉设计阶段，设计师按宽度750px（iPhone 6）做设计稿，除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注，输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图。

第二步，输出两个交付物给开发工程师：一个是程序用到的@3x切图资源，另一个是宽度750px的设计标注图。

第三步，开发工程师拿到750px标注图和@3x切图资源，完成iPhone 6（375pt）的界面开发。此阶段不能用固定宽度的方式开发界面，得用自动布局（auto layout），方便后续适配到其它尺寸。

第四步，适配调试阶段，基于iPhone 6的界面效果，分别向上向下调试iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。由此完成大中小三屏适配。

为什么选择iPhone 6作为基准尺寸？

当面对大中小三种屏幕需要适配的时候，很容易想到先做好一种屏幕，再去适配剩下两种屏幕。第一个决定是到底以哪种屏幕作为设计和开发的基准尺寸。我们选择中间尺寸的iPhone （750px/375pt）作为基准，基于几个原因：

1、从中间尺寸向上和向下适配的时候界面调整的幅度最小。375pt下的设计效果适配到414pt和320pt偏差不会太大。假设以414pt为基准做出很优雅的设计，到320pt可能元素之间比例就不是那么回事了，比如图片和文字之间视觉比例可能失调。

2、iPhone 6 plus有两种显示模式，标准模式分辨率为1242x2208，放大模式分辨率为1125x2001（即iPhone 6的1.5倍）。可见官方系统里iPhone 6和iPhone 6 plus分辨率之间就存在1.5倍的倍率关系。很多情况下这两种尺寸可以用1.5倍直接等比适配。

3、1242x2208这个奇葩的数值是苹果官方都不愿意公开宣传的一个分辨率，不便于记忆和计算栅格。640x1136虽然是广泛应用的一个分辨率，但是大屏时代依然以小尺寸为设计基准显然不合时宜，设计师会停留在小屏的视角做设计。

三、移动端兼容性测试怎么做？

什么是兼容性测试

兼容性测试是指测试软件在特定的硬件平台上、不同的应用软件之间、不同的操作系统平台上、不同的网络等环境中是否能够很友好的运行的测试。–【百度百科】

为什么要做兼容性测试

目前碎片化十分严重，尤其是安卓设备。安卓设备碎片化、品牌碎片化，大家熟知的安卓品牌都有好多家，每家可能还有定制的系统，都给我们适配带来了不小的挑战。除了上面的碎片化，当然还有系统版本碎片化，屏幕碎片化等，为了给用户更好的用户体验，做APP的兼容性测试，还是非常有必要的。

兼容性影响因素

用户

硬件

软件

技术

网络

影响因素大致可以分为以上几类，我们对所测APP做兼容性测试时，可以从以上方面去考虑。

1、用户

我们需要依据自身APP用户群体的特征以及使用习惯，去做相应的兼容。比如用户群体如果大多是老人的话，可以考虑大字体的适配。比如针对旅游人士，可以考虑过程中网络的状况。如果拥有大量海外用户，可以考虑多币种、多语言、多度量、时区问题。

2、硬件

设备类型（手机、平板、穿戴式设备）

生产商（安卓手机存在每个厂商的定制化差异）

显示屏（屏幕大小、分辨率）

特殊硬件功能（NFC、蓝牙、相机、定位功能等）

3、软件

操作系统

浏览器内核

伴生应用

4、技术

RN、H5、native

开发语言(oc、swift）

5、网络

2G、3G、4G、wifi

兼容各种网络下APP的表现

iOS APP兼容性

屏幕分辨率

屏幕尺寸（含异形）

操作系统版本

Xcode版本

开发语言

第三方库或SDK

安装、升级

Android APP兼容性

屏幕分辨率

屏幕尺寸（含异形）

Android版本

系统版本

处理器架构（arm、x86）

开发语言（Java、koltin、混合）

第三方库或SDK

安装、升级

H5兼容性

CSS样式兼容（一些属性的浏览器标示前缀没有添加，导致默认浏览器不认识这个属性，所以样式错乱。有些布局不灵活，样式边界处理不好，导致宽窄屏显示异常）

JS兼容（主要是浏览器或者系统版本，新的js api不支持，但是没有做降级处理）

第三方库或SDK

框架（react、vue……）

缓存（sessionstorage、localstorage）

哪些场景需要做兼容性验证

UI显示

多次快速点击

拉起虚拟键盘挡住输入区

虚拟物理按键收起与显示

多个输入框来回切换

控件焦点热区文体

前后台、多个应用切换

指纹识别和faceid等

框架升级

网络

新老版本兼容

第三方依赖库或者SDK升级

前后端版本兼容

如何做兼容性测试

主要分为内部和外部。内部由测试人员自己覆盖主要机型。机型选取的原则是，根据自己APP用户的机型，选取至少top10进行人工兼容性测试。内部还可以进行的就是UI自动化测试。外部可以借助云测平台，比如testin、testbird等。

四、rem 与 vw 适配方案

在做移动端适配的同学们都应该知道我们都是用rem布局做移动端适配但是过了这么多年了，vw的兼容性已经很好了，现在我们可以直接切换到vw了。

首先 rem r就是root意思，始终跟着body的字体大小变动，不跟随父元素改动而改动

设置<meta name="viewport" content="xxx">（可以根据dpr缩放viewport，也可以直接使用1倍的视口大小）

vh vw

视口单位区别于%单位，视口单位是依赖于视口的尺寸，根据视口尺寸的百分比来定义的；而%单位则是依赖于元素的祖先元素。

用视口单位度量，视口宽度为100vw，高度为100vh（左侧为竖屏情况，右侧为横屏情况）

例如，在桌面端浏览器视口尺寸为650px，那么 1vw = 650 * 1% = 6.5px（这是理论推算的出，如果浏览器不支持0.5px，那么实际渲染结果可能是7px）。

所以有了这个单位，根本不需要为了不同宽度的设备做不同的 rem 宽度设置，也不需要用 JS 去算 1% 设备屏幕宽度是多少 px 然后设置给 rem。

按照一般情况下我们可以根据设计稿使用sass

需要sass入门的同学可以看我sass的文章

传送门

同时我们也可以使用京东的方案 vw+rem的布局方式，元素布局上依然使用rem单位，没有缩放viewport, html元素的font-size则使用vw + px fallback的形式，并且使用media query来限制布局宽度

以上就是关于移动端如何做适配相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。

推荐阅读：

哈尔的移动城堡免费版日语（哈尔的移动城堡日语 mp4）

中国移动怎么查实名认证（中国移动号码申请）

抖音上买手机靓号陷阱（中国移动靓号网上选号）

运营助理是做什么的难吗（运营助理主要是做什么的）

乡村广场景观设计规范要求（乡村广场景观设计规范要求标准）