移动端页面制作基础(一)

banner

移动端互联网大热的今天,WEB移动端页面的制作也成为了前端开发工程师们必须要GET的一项技能。很多还没正式接触过WEB移动端页面制作的小伙伴可能心里会有很多疑问,比如:如何适配各种移动端屏幕?和PC页面的开发有什么区别?如何调试,有什么特殊的技巧等等。。。

今天,就针对移动端页面的开发过程做个大概的简述,希望对还未接触过移动端WEB页面开发的同学有所帮助。有兴趣的同学,可以先准备好chrome浏览器,一部移动端手机和编辑器,以便自己修改并查看后面出现的例子。

首先,我们先简单的设置一下chrome浏览器的移动端适配功能。以便后面方便我们调试页面。先打开一个正在开发的网页,右键页面选择审查元素,出现以下的工具栏:

ar1

在工具栏左上角,有个手机的标志,点击将移动端适配开启。随后界面变成以下的样子:

ar2

在顶部的工具栏里可以选择具体的移动端设备,选择以后需要刷新一下,使页面重新渲染才能生效。另外还可以更改页面尺寸的屏幕密度。学会了如何使用调试设备,我们进入正题,先观察一下以下代码。

ar3

很简单的一个页面,主要是在页面里插入一张980×300和一张320×100的图片。这个页面在PC端看是没有任何问题的,但是在手机端看,就会发现页面被缩放了,980宽度的图片刚好放满一个屏幕,那有些人可能会觉得是浏览器为了使所有图片都能完整看到,才会进行缩放,那大家可以试试,将980宽度的图片删除后刷新页面再看下效果。你就会发现,页面的缩放比例和之前一样,320宽的图片看上去还是那个大小。

ar4

那如果是按照这种默认的显示效果去开发移动端页面,那肯定是大大的有问题,这意味着我们的设计稿是980的宽度并且文字和图片都要好几倍大,这大大增加了设计和开发成本。那如何使移动端页面开发可以像PC端开发一样方便呢?接下来就要为大家介绍meta标签的viewport指令。

大家先把以下代码加入到上一个例子中。

ar5

然后我们在浏览器刷新页面重新看下效果,就会发现,页面没有缩放了,并且出现了横向滚动条,如果在真机上查看,就会发现页面无法用手指操作进行缩放了。稍微懂点英语的就能够很明白这段代码的含义。简单来说,就是设置页面的viewport,让页面的宽度等于设备宽度,页面初始缩放比例为1(就是不缩放),页面最大缩放比例也是1,用户不能通过手指操作缩放。后面三个就不需多说了,关于设备宽度,有人可能会疑惑是怎么来的。

移动端有两个和显示屏相关的参数,一个是分辨率,一个是屏幕密度。比如,iphone4和iphone5的分辨率分别对应的是640×960和640×1136,他们的屏幕密度都是2,一个简单的算法就是,分辨率除以屏幕密度就是设备真实展现的宽度,你也可以理解成css的1px就是设备的1px。当然这其中有涉及到三个概念(layout viewport、visual viewport和ideal viewport),这些概念上面都有点到,没有明说,感兴趣的可以自行百度,我们不做深入的讲解。

这样一个简单的设置以后,实际上我们就算入门了。后面的开发基本上就和PC端页面没什么太大区别,只是所展现的区域变小了,然后还需要考虑一些适配。

11