移动端开发

移动端开发

移动端开发是与PC端肯定是有很大不同的,所以我们需要学习如何在移动设备上开发完美适配的webapp

开发移动端应用我们需要学习的知识点可以分成如下几个:

  1. 移动端布局适配

  2. 移动端事件

  3. 移动端交互效果

  4. 移动端前端框架

  5. 移动端调试

移动端布局适配

从屏幕尺寸、屏幕类型等方面来看的话,移动设备和PC设备大有不同,所以从布局、适配等方面都需要我们考虑到

Viewport视口的作用

在以前,移动设备还不是智能设备的时候,设备访问智能访问到网页的左上角(当时都是pc网站),查看全部内容需要通过滚动条

慢慢的我们发现,我们的一个页面放到移动端中访问的时候,没有滚动条了,但是内容都缩小了

这是因为我们有了一个叫做viewport的一个东西

网页不是直接放入浏览器中的,而是先放入到viewport中,然后viewport在等比缩放到浏览器的宽度,放入浏览器,viewport在缩放的过程中,网页内容也被缩小了

网页访问到的clientWidth其实是viewport的宽度

这样的话我们需要做一些处理,其实问题的根源在于viewport的宽度和浏览器宽度不一样,如果我们能将其设置为一样的话,不会出现这样的问题了

我们可以通过meta标签来设置viewport将其设置为浏览器的宽度,也就是设备的宽度,这样的话布局就会简单多了

viewport的宽度

当浏览器宽度小于980的时候,宽度就是980,当浏览器尺寸宽度大于980的时候,宽度和浏览器宽度一致

通过meta标签来设置viewport

<meta> 标签提供关于 HTML 文档的元数据。它不会显示在页面上,但是对于机器是可读的。可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

meta标签大全

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

meta viewport 的 6个属性:

width
initial-scale 设置layout viewport 的宽度,为一个正整数,或字符串”width-device”
minimum-scale 设置页面的初始缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置layout viewport 的高度,这个属性并不重要,很少使用
user-scalable 是否允许用户进行缩放,值为”no”或”yes”, no 代表不允许,yes代表允许

移动端布局方式与设计图

现有的布局方式:

  1. 固定布局,每一个元素都是固定的尺寸,内容区域居中在浏览器中间

内容区域的尺寸:980,1000,1100,1200

  1. 响应式布局,利用媒体查询来实现不同尺寸的浏览器显示结构不一样

一般会有三张设计图,PC,平板,手机

  1. 自适应布局,属于响应式里的一种,利用rem、百分比、vwvh等布局单位来实现

设计图一般只有一张,640、750居多

移动端布局

移动的屏幕和PC的屏幕有一个很大的区别,移动端是视网膜高清屏(Retina)

retina屏幕有一个属性叫DPR(设备像素缩放比) = 物理像素/逻辑像素

例如,iphone 5s手机商宣传手机的尺寸是:640宽,这个值就是物理像素,而从开发者眼里我们所指的其实是320px(逻辑像素)

在dpr为2的手机中,我们的一个逻辑像素会从横纵两个方向分别以2个像素点来渲染

如果不管dpr的话,其实我们布局依然可以,因为我们设置一个像素宽高的东西的话,在手机上看见的基本也就是这么大,至于手机设备用多少个物理像素去渲染,大小还是不会变化的

设计师出图都是2倍的,是因为,在页面中除了字体(矢量图)大部分都是位图,也就是如果一个像素宽高的盒子里准备放入图片,如果图片的尺寸也是一个像素宽高的话,因为其实在移动端渲染的时候是用四个像素来渲染,图片会失真,但是如果我们给一像素宽高的盒子放入2像素宽高的图片的话,不就失真

布局单位

因为我们的移动设备有很多种,所以我们的布局不可能是固定布局,所以我们要使用自适应布局

我们在开发中可以选用很多自适应布局单位,这些单位必须满足一个条件

  1. %

优点:简单,无需设置,兼容性好 缺点:基于父元素的属性来设置,如果父元素没有宽高,设置无效

  1. vwvh

一个vw等于viewport宽度的百分之一,一个vh等于viewport高度的百分之一 vmax等于vw和vh中较大的那个 vmin等于vw和vh中较小的那个

优点:简单,无需设置 缺点:兼容性不好

  1. rem

一个rem等于根元素(html)的字体大小,兼容性很好 优点:兼容好,使用简单 缺点:需要设置

rem与适配

当我们想使用一个自适应单位的时候,发现%有缺陷,vwvh兼容性差,弹性盒所针对的是元素排列的问题,只适用于某种情况,所以我们就想,能给我一个没啥上面的缺陷的单位,想到了rem

rem的兼容性好一点,它也确实是一个布局单位,不受父子元素的影响,设置了rem之后,也不会对px、em等单位造成影响,它是一个理想的单位

rem也有一个致命的问题,就是它不是一个自适应的单位,不会跟着设备尺寸不同而不同,但是没有关系,我们有万能的js,可以去动态的设置它

方法1:

我们可以将1rem设置成屏幕的某一个比例,比如将1rem设置成屏幕的十分之一

假设我们的设计图是640宽的,我们拿到之后量了一下a的宽度为480px,得到比例a所占屏幕3/4,根据rem与屏幕的关系,最后设置成7.5rem

就是说在设置元素的宽度是时候,会根据设定好的比例关系去进行换算

</head>
<script>
    document.documentElement.style.fontSize = document.documentElement.clientWidth/10 + 'px'
</script>
方法2:

如果设计图是640的图,这个时候我们知道它是照着i5来的,我们现在假设世界上所有的手机都是320的,也就是每一个人用的都是i5,在这个理想的情况下,因为手机都一样,尺寸都一样,和pc端的固定布局也就一样了

假设有一个在640的图上我们量得的宽度是320,因为是二倍图,所以我们知道,它的实际宽度是160px,这样的话,我们直接给这个设置设置width:160px就可以了,这个时候,我们玩个花子,不要单纯的使用px来设置,用rem来设置,例如,我可以将rem设置为100px,这样的,刚才的盒子设置为width:1.6rem,算法就是 量的宽度/(dpr*100) = 要设置的rem值

这样我们就可以开心的开发,量一个尺寸,除个2,再小数点推两位,设置就性了,但是我们也知道,手机的尺寸并不可能都是320,这样的话,没有关系,我们可以根据一个比例来算rem到底设置为多少

在手机宽度为320的时候,我们设置的1rem=100px,所以有一个比例 b = 100/320

那么在W宽度的手机上,1rem应该是多少呢?设为x 那么x/w = b

得到x = w/3.2

那么就不要写死html的fontsize为100了。而是用js去设置:

document.documentElement.style.fontSize = document.documentElement.clientWidth/3.2 + ‘px’

这样,我们就可以得到一个自适应的rem

方法3:

设计图如果是640的,我们知道设计的依据屏幕依然是320,假设所有的手机都是320的

有一个div量得320,我们知道它的实际宽度是160,所以我们在css里直接设置160px。布局就很简单了,因为量多少,除以2就可以直接设置了

但是手机不能只有这一个尺寸,不过没关系,我们可以想办法,我们知道,页面是放在viewport里的,页面的宽度就是viewport的宽度,我们在前面的方法会会将viewport通过meta标签设置为手机屏幕的宽度,但是现在我们就将viewport的宽度强行设置为320px,那么我们页面就会认为它的屏幕宽度就是320px,如果是在屏幕宽度不等于320的手机里,viewport也会进行缩放,缩放到手机屏幕大小,但是这个时候,页面依然认为手机屏幕是320的,也就是说,布局使用固定布局,自适应由viewport去做了,让它将咱们320的页面缩放到不同尺寸的移动设计,达到表现一致

<meta name="viewport" content="width=320">

饿了么的做法:认为世界的手机都是二倍宽的,然后再调整viewport

常见的需要注意的问题
  1. 1px边框

在移动端中,如果给元素设置一个像素的边框的话,那么在手机上看起来是会比一个像素粗的。

解决方法:使用伪类元素模拟边框,使用transform缩放

.a::after{
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #333;
    position: absolute;
    left: 0;bottom: 0;
    transform: scaleY(0.5)
}
  1. 响应式图片

在移动端中,图片的处理应该是很谨慎的,假设有一张图片本身的尺寸是X宽,设置和包裹它的div一样宽,如果是div宽度小于图片宽度没有问题,但是如果div宽度大于图片的宽度,图片被拉伸失真

解决方法:让图片最大只能是自己的宽度

img{
    max-width: 100%;
    display: block;
    margin: 0 auto;
}
移动端webkit

移动端的浏览器的内核百分之99都是webkit内核


移动端事件

移动端中的事件和PC的事件有一些是不同的,例如,mouse部分事件在移动端里没有了

取而代之的是touch事件:

touchstart/touchmove/touchend/touchcancel

添加事件的时候可以用ontouchstart,但是有的时候很可能失效,建议使用addEventListener的方式

touchcancel比较少见,在系统取消触摸的时候触发

touch事件对象里面的属性和mouse的略有不同,例如在mouse事件里可以直接从事件对象里取出pageX,clientX,screenX

touch事件对象里有touches,changedTouches,targetTouches三个属性,上面保存着关键的位置信息

它们里面保存的是触发事件的手指的信息,但是要注意,虽然三个里面保存的信息看似都一样,但是在touchend事件里,只能使用changedTouches

click的300ms延迟问题

在移动端中,click事件是生效的,但是它有一个问题,点击之后会有300ms的延迟响应

原因:safari是最早做出这个机制的,因为在移动端里,浏览器需要等待一段事件来判断此次用户操作是单击还是双击,所以就有click300ms的延迟机制,Android也很快就有了

  1. 不用click,用自定义事件tap

tap是需要自定义的:如果用户执行了touchstart在很短的时间又触发了touchend,且两次的距离很小,而且不能触发touchmove

使用zepto类库的时候,里面自带tap事件,,但是需要在zepto.js后面加上一段js

zepto官网;Touch模块

百度有一款touch.js的插件教程

hammer.js也是一个手势事件库文档

  1. 引入fastclick库来解决
点透bug的产生

点透bug有一个特定的产生情况:

当上层元素是tap事件,且tap后消失,下层元素是click事件。这个时候,tap上层元素的时候就会触发下层元素的click事件

解决方式:

  1. 上下层都是tap事件,缺点:a标签等元素本身就是自带的click事件,更改为tap比较困难
  2. 缓动动画,让上层元素消失的时候不要瞬间消失,而是以动画的形式消失,事件超过300ms就可以了
  3. 使用中间层,添加一个透明的中间元素,给它添加click事件并消失,这个时候接收点透的是透明的中间层
  4. 使用fastclick

移动端测试

  1. 使用chrome浏览器有移动设备模拟功能,在这里可以做一些模拟测试,但是要注意的是,毕竟不是真机,会有一些测试不到的问题

  2. 手机连接上电脑的无线,总之使其在同一个网络里,然后就可以通过ip访问

需要测试的浏览器:

chrome,firefox,UC,百度,QQ,微信,Android,safari

移动端交互

动画效果全部使用css3

JQ生成二维码

可以使用jquery.qrcode.js插件,可以快速的生成基于canvas绘制的二维码

兼容查阅网站

can i use ,在这里可以查看很多属性、api的兼容性

Done! By suki,引用请注明出处作者。
License CC BY-NC-SA 3.0.

0%