移动端开发初识

对于pc端的前端开发以及html5和css3学习过后对页面布局更加熟练了,对于现在开发更多倾向于移动端开发,对于移动端开发和传统PC开发又有所不同,下面简单认识下移动端开发概况!

对于学习移动端开发首先要了解下面三个概念(设备独立像素,物理像素,和像素比),下面简单介绍下这三个概念!

• 设备独立像素:

   就是屏幕的尺寸,屏幕大小(这个可以叫做点,是一个单位),可以改变(缩放可以改变)

window.innerWidth/window.innerHeight

• 设备像素(物理像素)    设备的分辨率(实际像素值),就是购买的设备如手机售货员告诉你手机多少像素

            这个值是虚拟的,无法获取            控制最小像素显示点

•  像素比(DPR这个值无法修改)

   缩放比例=设备像素/设备独立像素

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" />

我们不喜欢用户进行缩放,直接我们在开发过程中,转换成对应的物理像素能较好的观察哦设备的显示效果!因此无需放大!进行缩放