「这是我参与2022首次更文挑战的第14天,活动详情查看:2022首次更文挑战」。
年前接手了一个抽奖活动的项目,现在已经平稳落地了。在这个项目测试阶段出现了非常多的小问题,都是关于手机适配问题的。用这一篇博客来记录一下我出现的问题和解决方案。
先上问题
问题描述:在ios
系统上滚动条会越滚动越偏上,由于本人是贫穷的打工仔,使用的是国产android
机,在开发过程中并未出现这个问题。所以得测试逮到了。
前提:这里使用的是vant
的swiper
,绝对定位定位到页面固定位置。
开始解决
我们都知道这个插件实现这个轮播图的原理是超出部分隐藏,所以我们将全部信息不隐藏,就能发现每一次的滚动之间间距是一样的,但是这个间距小于我们想要滚动的距离。
这个时候有一个公司前辈告诉我说把swipe
的高度设置为6
的倍数即可,我秉着前辈指导就是学到的原则开始修改。还真管用,我们要知其所以然。
开始正文
移动端适配是每个前端都需要拿捏的东西,这里面涉及到非常多的概念:像素、分辨率、PPI
、DPI
、DP
、DIP
、DPR
等等
一、英寸
一般用英寸用来描述屏幕的物理大小:对角线的长度。 比如手机开发商说的6.7英寸的xx手机
英寸和厘米的换算:1英寸 = 2.54 厘米
二、分辨率
在介绍分辨率之前,先来介绍一个我们日常最常说的一个单位:像素
1. 像素
像素就是由一个个特定颜色和特定位置组成的小方块。像素也可以作为手机和图片的最小组成单位。
2.屏幕分辨率
屏幕分辨率指一个屏幕具体由多少个像素点组成。
3. 图像分辨率
我们通常说的
图片分辨率
其实是指图片含有的像素数
后续请在下一篇查看吧~,今天摸鱼时间结束