产品设计中需要考虑的H5适配

最近有许多小伙伴咨询我，h5页面适配的需求该怎么提，细到什么程度？ 于是小编我总结了这篇文章。

目录

1. H5为什么要做页面适配

2. 页面适配主要解决哪些问题

H5为什么要做页面适配

1. 移动端浏览器内核大多数是webkit内核，但是也有部分浏览器是其他类型内核， 不同的浏览器内核对css样式的支持程度不一样，同一个css属性在不同浏览器的表现可能不同。

2. 手机屏幕尺寸不同，分辨率不同， 可能会导致布局错乱或字体、图片没有自适应。一般设计给予的设计稿只有一份，比如我们部门给的设计稿是以iphone7的尺寸（宽度375px）交付的，我们需要在不同屏幕尺寸下让整体布局保持一致。

3. 横竖屏适配问题 ，因为横屏宽度比较大，可以显示的内容更多；竖屏宽度比较小，显示的内容有限，它们的显示内容和样式按道理是需要做适配的。

页面适配主要解决哪些问题

1、 不同机型下css属性兼容问题

这是页面适配要解决的最基本问题。因为不同机型，自带的浏览器内核可能不一样，对css属性的支持程度不同，可能同一个css属性，在iphone上面表现正常，在安卓机型上就没有正常展示，为了保证同一份ui在不同的机型表现一致，开发可通过换一种等价属性，或者采取优雅降级的方案去做兼容。

如何知道要适配哪些机型？需要根据产品的目标用户使用的主流机型来定。主要考虑国家、年龄、性别。举个例子，如果你的目标用户主要是东南亚用户，需要适配的机型要考虑oppo、vivo、一加等。

2、 页面元素自适应

页面元素自适应也可以叫响应式布局。 响应式布局指的是页面元素的大小， 包括字体大小、元素大小随着屏幕尺寸的变化而变化。

比如设计给的设计稿是宽度375px(高度一般不考虑)，在这个宽度上面图片的大小是宽12px/高12px，但是在宽度是780px的屏幕下，图片的宽度就按比例放大到宽24px/高24px。

3、 iphonex刘海屏幕适配问题

众所周知，iphonex取消了物理按键，改成底部小黑条和顶部的齐刘海。这个改动会导致网页有屏幕适配问题。
如果h5页面使用了吸底导航、返回顶部等固定定位的元素，就需要关注iphonex的适配问题了。

举个例子如下图（来自网图），左图是没有经过适配，底部的导航被小黑条挡住；右图是经过适配的。

4、 横竖屏适配

横屏宽度较大，可以显示的内容更多；相反竖屏宽度较小，显示的内容较少。另外由于横屏模式下，宽度很宽，高度很短，页面元素自适应后会变得很大，显得不协调。所以横竖屏适配要解决以下问题：

1）显示内容不同
2）展示样式不同

设计师一般会对横竖屏做2种不一样的设计。比如下图（来自网图），横屏模式下显示具体描述，竖屏模式下只需要展示标题：

但是如果设计师没有给2种不一样的设计，就需要我们自己去对横竖屏样式适配了。

5、暗黑模式适配

背景 ：

可见越来越多的新版本设备加入了暗黑模式。

优点：
1）可减少设备耗电量。
2）在夜间使用暗黑模式，减弱光对眼睛的射入，保护眼睛。

在暗黑模式下，系统对所有的窗口、菜单、控件都使用了较暗的色调，我们的h5主色调，应该随着设备模式的切换而自适应色调，呈现出一个比较协调的视觉效果。

小结：

以上提出的4种适配问题，css兼容适配和元素自适应是比较基础的适配，符合大多数的h5页面，只要根据目标用户，把需要兼容的机型给到开发就可以。

横竖屏适配和暗黑模式适配要根据产品的具体定位和目标用户来定，横竖屏适配大多数适用于游戏、视频、多图片类的h5，暗黑模式适配大多数适用于阅读类的h5。

文末福利

「0元数据产品入行福利课」

本期课程主题：

如何从0到1搭建数据产品？

在线分享数据产品入门必备基本功！

—— THE E ND ——

▼ 喜欢请分享，满意点个赞，最后点「在看」▼