H5页面适配几种展现形式？的方法命名方便记忆

过去，当我拿到视觉稿并需要将其适应页面时，我通常会设置断点来编写不同分辨率和大小的媒体查询，然后根据效果进行微调。 如果在开发过程中对视觉稿进行了修改，则修改的区域需要重新进行分辨率测试和微调。 这个时候我就会胡思乱想。 此外，这些改编基于已知的分辨率和大小库。 如果市场上出现新的分辨率和尺寸型号，哈哈，我们又要跑在测试和微调的路上了。 是否可以用一套代码来适配各种分辨率窗口？ 那么我们就不会再有上面的烦恼了，而且开发效率会更快，维护成本也会降低很多。

答案是肯定的，这种形式最早出现在flash全屏网站中。 前段时间看了鞠老师介绍的一篇关于图片适配属性-fit的文章，发现虽然这个属性-fit只能应用于图片，但是它的适配思路在H5页面适配中可以借鉴。 这个思想就是“缩放”，也是本文的核心内容。 即无论窗口长宽比是多少，页面都可以自动缩放到窗口大小，并且元素的坐标和大小也可以用px单位来测量，既准确又易于用js计算。

这里使用-fit方法是为了让命名更容易记住。 下面简单介绍一下H5页面适配的几种展示形式。

1、模式：以内容中心为基点，按照视觉稿的长宽比进行缩放，以适合窗口显示整页内容，窗口与窗口的宽度比或高度比中较小的一个内容被缩放以填充窗口。 当窗口长宽比与模型不同时，另一个方向的两侧都会有空白部分。

2、覆盖模式：以内容中心为基点，根据窗口的长宽比缩放窗口，以适合窗口。 窗口和内容之间的宽度比或高度比中的较大者被缩放以填充窗口。 当窗口长宽比与视觉拔模不同时，另一个方向的两侧超出窗口而被裁剪。 该模式不会留下“模式”的空白部分。

3.填充模式：以内容中心为基点，拉伸页面以填充整个窗口以适合窗口。 当窗口长宽比与视觉草稿不同时，内容会被一定程度的拉伸。

4.缩放宽度模式：页面水平缩放以填充窗口，并根据视觉稿的宽高比垂直放大。 效果有两种可能性：“模式”或“覆盖模式”效果。

5. 缩放模式：页面垂直缩放以填充窗口，并根据视觉草稿的宽高比水平放大。 效果有两种可能性：“模式”或“覆盖模式”效果。

下面介绍一下我在项目中适配的想法和选择，以及实现方法。

适配之前，首先要和设计者一起定义页面的长宽比，即设计稿的分辨率大小。 由于活动主要通过微信进行推广，所以我这里使用的是/5s型号的微信浏览器。 窗口分辨率为640*1008。 选择该决议主要是出于以下两点综合考虑：

客户端分辨率。 根据友盟和腾讯云近几个月的运营活动统计，/5s 640*1136的分辨率占据了IOS平台的最大份额。 同时，太高的分辨率对于低端机型来说是一种浪费，而且需要大量的资金。 下载这些资源需要额外的流量； 具有相同长宽比尺寸的平台的数量。 同等尺寸比例下，720*1280和1080*1920平台分辨率也占比最大。

以最近的一个项目为例，H5页面基本上可以分为以下四种内容类型：

1.填充填充窗口的图层，例如背景窗帘（图1）。

图1

该层实现起来最简单，采用“填充模式”适配形式。 实现效果的核心代码如下：

图1中的图像自适应处理采用“覆盖模式”自适应形式。 实现效果的核心代码如下：

2.基于水平和垂直同时居中的图层，如页面的主要内容部分（图2）。

图2

像这样的图层的背景颜色是纯色或透明的。 “模式”是在任何分辨率窗口中显示整页内容的最佳选择。 空白部分的颜色可以通过添加宽度和高度为100%的图层并设置背景属性来修复。 。 实现效果的代码如下：

3、用边缘非纯色的图层填充整个窗口，如（图3）。

图3

“覆盖模式”和“填充模式”可供选择。 从易用性的角度来看，“填充模式”可以精确适应窗口区域，但从视觉体验的角度来看，宽度和高度不等比例的拉伸会导致图像失真。 同时，这一层的主要内容和交互操作都集中在中间，不影响视觉体验。 重要的边缘可以适当裁剪，所以最好选择“覆盖模式”进行适配。 实现效果的代码与上面的例子基本相同。 区别在于缩放比例。 代码如下：

4. 对于大于屏幕的图层，可以通过手势移动场景，例如（图4）。

图4

“缩放宽度模式”和“缩放模式”适合在这种场景下使用。 （图4）是水平左右移动图层，所以这里选择“scale-mode”适配模式。 实现效果的代码如下：

这里除了缩放(x,y)之外，还可以使用zoom来缩放。 根据实际场景需求选择合适的方法。 两者之间的主要区别是：

缩放基点不可自定义，固定为左上角(0,0)； :scale(x,y) 缩放转换后仍然占用原来的空间，缩放转换后缩放占用的空间等于缩放后的尺寸。

还有一些复杂的图层，但是都可以拆分为以上几种类型的图层来对内容进行分层。 每层根据内容形式选择相应的适配模式进行缩放。

总结

1.高效适配的核心思想是“缩放”。

2、每种适配方式都不是绝对的，需要根据需求场景选择合适的形式。 适配前，与设计师沟通，明确适配形式。 遇到复杂场景时，可以将内容分开来区分适配。 当页面内容不适合定向旋转显示时，此时无需盲目适配。 有两种方式可供选择：

找设计师从另一个方向制作响应式设计稿，然后做成响应式页面； 会出现提示让用户旋转回支持的方向，如（图5）。

图5

3、窗口需要设置等于设备的物理宽度，即width=-width，-scale=1。

4、适配相关的js放在head中。 文档结构加载完毕后，先执行适配js，并在body中添加可见和隐藏动画，避免js未执行前后页面缩放。 可见和隐藏动画的相关代码如下：

最后，以上就是我自己在这个项目中H5适配的方法和应用。 可能会有更好的适配方案。 请大家多多指教。作者：冯凌