移动端开发与pc端开发不同
移动设备与PC设备最大的差异在于屏幕,这主要体现在屏幕尺寸和屏幕分辨率两个方面。
通常我们所指的屏幕尺寸,实际上指的是屏幕对角线的长度(一般用英寸来度量)如下图所示
而分辨率则一般用像素来度量 px,(像素是一个相对长度单位(像素并没有固定的长度))表示屏幕水平和垂直方向的像素数,例如1920*1080指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成,如下图所示
了解一下几个概念,能使你的移动端开发更加顺畅
一、像素密度
DPI(Dots Per Inch)是印刷行业中用来表示打印机每英寸可以喷的墨汁点数,计算机显示设备从打印机中借鉴了DPI的概念,由于计算机显示设备中的最小单位不是墨汁点而是像素,所以用PPI(Pixels Per Inch)值来表示屏幕每英寸的像素数量,我们将PPI、DPI都称为像素密度,但PPI应用更广泛,DPI在Android设备比较常见。
如下图所示,利用 勾股定理 我们可以计算得出PPI
PPI值的越大说明单位尺寸里所能容纳的像素数量就越多,所能展现画面的品质也就越精细,反之就越粗糙。
二、设备独立像素
随着技术发展,设备不断更新,出现了不同PPI的屏幕共存的状态(如iPhone3G/S为163PPI,iPhone4/S为326PPI),像素不再是统一的度量单位,这会造成同样尺寸的图像在不同PPI设备上的显示大小不一样。
如下图,假设你设计了一个163*163的蓝色方块,在PPI为163的屏幕上,那这个方块看起来正好就是1*1寸大小,在PPI为326的屏幕上,这个方块看起来就只有0.5*0.5寸大小了。
做为用户是不会关心这些细节的,他们只是希望在不同PPI的设备上看到的图像内容差不多大小,所以这时我们需要一个新的单位,这个新的单位能够保证图像内容在不同的PPI设备看上去大小应该差不多,这就是独立像素,在IOS设备上叫PT(Point),Android设备上叫DIP(Device independent Pixel)或DP。
举例说明就是iPhone 3G(PPI为163)1dp = 1px,iPhone 4(PPI为326)1dp = 2px。
我们也不难发现,如果想要iPhone 3G/S和iPhone 4/S图像内容显示一致,可以把iPhone 4/S的尺寸放大一倍(它们是一个2倍(@2x)的关系),即在iPhone3G/S的上尺寸为44*44px,在iPhone4/S上为88*88px,我们要想实现这样的结果可以设置44*44dp,这时在iPhone3G/S上代表44*44px,在iPhone4/S上代表88*88px,最终用可以看到的图像差不多大小。
通过上面例子我们不难发现dp同px是有一个对应(比例)关系的,这个对应(比例)关系是操作系统确定并处理,目的是确保不同PPI屏幕所能显示的图像大小是一致的,通过window.devicePixelRatio可以获得该比例值。且 window.devicePixelRatio ~= 物理像素/独立像素
1. 移动端屏幕适配方案
1). 媒体查询方式
@media (max-width:320px){
body{
background:red;
}
}
@media (min-width:321px) and (max-width:320px){
body{
background:orange;
}
}
@media (min-width:376px) and (max-width:425px){
body{
background:green;
}
}
@media (min-width:426px) and (max-width:768px){
body{
background:blue;
}
}
@media (min-width:769px){
body{
background:grey;
}
}
优点:根据设备宽度响应式布局 //使用媒体查询做的响应式布局,根据不同屏幕宽度加载不同css.
缺点:代码量过大,难以维护
2). meta viewport
在head标签内部加上这段代码
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。maximum-scale=1.0 和 minimum-scale=1.0 可省略,因为这里我们设置页面的初始缩放值为不缩放,并且禁止用户缩放。那么设置允许用户的最大/小缩放值就都是没有意义的。
width=device-width: 让当前viewport宽度等于设备的宽度
user-scalable=no: 禁止用户缩放
initial-scale=1.0: 设置页面的初始缩放值为不缩放
maximum-scale=1.0: 允许用户的最大缩放值为1.0
minimum-scale=1.0: 允许用户的最小缩放值为1.0
3). rem
rem是CSS3新增的相对单位,root em,根em
rem和em的区别?
- 使用rem为元素设定字体大小时,仍然是相对大小,但相对的是Html根元素,避开了很多层级关系
- em是相对父级字体大小
2. 移动端点击事件
早期移动设备浏览器网页时内容非常小,为了增强用户体验,苹果公司专门为移动设备设计了双击放大的功能,确保用户可以非常方便的放大网页内容,但是当用户单击一个按钮时,移动设备会延时(约300ms)执行,判断用单是否要双击。
1)自己封装tap事件
利用触屏事件可以解决这个问题:
1、确定只有一根手指,
2、允许从接触和离开屏幕的距离有轻微抖动,即允许用户 touchstart 和 touchend 距离 < 60
3、用户从接触和离开屏幕的时间不能超过 150ms
2)使用 zepto.js
zeptojs为我们封装了常的触屏事件
但是以上两种方案都存在 点透问题
点透问题:点击上层的的 tap 事件,下层的 click 事件也会触发。
如图,
当点击半闭按钮时,如果下面有click事件或链接则会被触发。
并且,有时我们也希望移动版页面在PC端上也可用,但是PC端是不支持touch事件的,这时我们面临的问题是即提升click在移动设备上的响应速度,又不能使用Zepto.js的tap事件,这时fastclick可以解决这个问题。
3 终极)使用fastclick.js
fastclick.js 原理:
在检测到touchend事件的时候,会通过DOM自定义事件立即出发模拟一个click事件,并把浏览器在300ms之后真正的click事件阻止掉
在 vue.js 中的使用
一.使用npm安装:
npm install fastclick -S
二.用法:
安装完以后,可以在在main.js中全局引入,并绑定到body,全局生效。或者在单页面引入,只针对当前页面生效
//引入
import FastClick from 'fastclick'
//初始化FastClick实例。在页面的DOM文档加载完成后
FastClick.attach(document.body)
3. 真机调试