移动端的适配(一)

186 阅读2分钟

「这是我参与2022首次更文挑战的第14天,活动详情查看:2022首次更文挑战」。

年前接手了一个抽奖活动的项目,现在已经平稳落地了。在这个项目测试阶段出现了非常多的小问题,都是关于手机适配问题的。用这一篇博客来记录一下我出现的问题和解决方案。

先上问题

image.png 问题描述:在ios系统上滚动条会越滚动越偏上,由于本人是贫穷的打工仔,使用的是国产android机,在开发过程中并未出现这个问题。所以得测试逮到了。 前提:这里使用的是vantswiper,绝对定位定位到页面固定位置。

开始解决

我们都知道这个插件实现这个轮播图的原理是超出部分隐藏,所以我们将全部信息不隐藏,就能发现每一次的滚动之间间距是一样的,但是这个间距小于我们想要滚动的距离。
这个时候有一个公司前辈告诉我说把swipe的高度设置为6的倍数即可,我秉着前辈指导就是学到的原则开始修改。还真管用,我们要知其所以然。

开始正文 image.png 移动端适配是每个前端都需要拿捏的东西,这里面涉及到非常多的概念:像素、分辨率、PPIDPIDPDIPDPR等等

一、英寸

一般用英寸用来描述屏幕的物理大小:对角线的长度。 比如手机开发商说的6.7英寸的xx手机

image.png

英寸和厘米的换算1英寸 = 2.54 厘米

二、分辨率

在介绍分辨率之前,先来介绍一个我们日常最常说的一个单位:像素

1. 像素

像素就是由一个个特定颜色和特定位置组成的小方块。像素也可以作为手机和图片的最小组成单位。

2.屏幕分辨率

屏幕分辨率指一个屏幕具体由多少个像素点组成。

3. 图像分辨率

我们通常说的图片分辨率其实是指图片含有的像素数

后续请在下一篇查看吧~,今天摸鱼时间结束