对于pc端的前端开发以及html5和css3学习过后对页面布局更加熟练了,对于现在开发更多倾向于移动端开发,对于移动端开发和传统PC开发又有所不同,下面简单认识下移动端开发概况!
对于学习移动端开发首先要了解下面三个概念(设备独立像素,物理像素,和像素比),下面简单介绍下这三个概念!
就是屏幕的尺寸,屏幕大小(这个可以叫做点,是一个单位),可以改变(缩放可以改变)
window.innerWidth/window.innerHeight
这个值是虚拟的,无法获取 控制最小像素显示点
缩放比例=设备像素/设备独立像素
window.devicePixelRatio(获取设备像素比dpr)
设备独立像素代表设备的一个点,一个点有包含多个像素点(包含多少个由设备dpr决定)!
逻辑像素
CSS像素,viewport中的一个小方格,CSS样式代码中使用的是逻辑像素。如果在一个设备中,物理像素与逻辑像素相等,将不会产生任何问题。但是,在iphone 4中,物理像素是640px*960px,而逻辑像素数为320*480px。因此,需要使用大约4个物理像素来显示一个CSS像素.
在实际开发中图片一般以750px为例,而我们是iphone6的设备独立像素是375px,750px的物理像素怎么得来的,由于inphone6的像素比2,所以独立设备像素*像素比得到物理像素750px,为了保持各个设备显示小一致!
上面说过的设备独立像素如何改变,下面就看看使用移动端开发的meta的viewport标签
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
wdith=device-width宽度等于设备宽度,initial-scale=1初始化的设备缩放比例(1表示不缩放,2表示200%扩大,相当于扩大了设备独立像素,)所有整体的物理像素改变,缩放倍数2,实际独立像素要除以2而不是乘上这个scale,所有在scale=1上面的图像,小于在scale=2的图像!物理近大远小成像特点,在小的尺寸上面显示更大些!
minimum-scale=1,maximum-scale=1//最大最小缩放比例,一般不用设置
移动端开发的meta标签一般只需要一下的属性就行
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
我们不喜欢用户进行缩放,直接我们在开发过程中,转换成对应的物理像素能较好的观察哦设备的显示效果!因此无需放大!进行缩放