首页/百家讲堂/浅谈移动端开发

浅谈移动端开发

浅谈移动端开发

现在移动互联网越来越普及,而作为前端攻城狮的我们,都慢慢转入移动端开发中来。随着HTML5及CSS3的强大功能,逐渐WebApp的技术进入了我们的世界!在WebApp的开发中,涉及到一个小技巧,下面将进行简单讲解。

一、设计师设计图制作

画布大小:统一使用iphone 5 的屏幕大小: 640 * 1136。
图标:采用“形状”画出,不要使用“位图”。
“形状”我们切图时可以根据需要放大且不失真!(图标是正常大小的一倍,后面说明原因!)
风格:扁平化设计,响应“苹果”的号召,而这也是现在设计的趋势!

浅谈移动端开发

二、HTML页面编写

在此说明一下,因为现在android的庞大数量,各种分辨率不同的手机也随处可见,不同的dpi导致我们在入门制作移动端页面时,出现无法想象的页面排版问题。 众所周知,不同的分辨率、密度,导致手机呈现图像的清晰程度不同。苹果的超高清屏及众多android手机的高清屏的缩放比例为 2 : 1 及 1.5 : 1, 这也就是为什么我们在电脑上的图片是清晰的,而到苹果手机上却模糊了,原来是 “被放大一倍显示” 了。所以引出了下面的解决方法:

1)页面布局:viewport
视口,也就是可视的区域。这个属性很容易理解,也就是浏览器窗口的网页区域!而移动设备宽度不同于web,所以需要进行改变,我们在页面head标签中 加入:

浅谈移动端开发

其中,各参数代表的是:

浅谈移动端开发

在我们设置了initial-scale=1之后,我们就可以以1 : 1的比例进行设置了,保证页面在各个移动设备上的正常显示。

2)图片显示

在保证页面布局正常的情况下,我们该考虑手机端图片对页面访问性能的影响了。在移动设备中,由于流量的控制,我们不能为了使图片清晰,而使用高分辨率图片,忽略了低端用户。我们在制作手机端网站时,通常使用一种折中的方法,也就是说:在640px宽的设计稿中,把页面制作成320px,再让页面根据比例自动缩放。这个保证在超高清屏中,图片的完美呈现(不失真),高清屏则稍稍费点流量。这也是我在一开头说的:图标是正常大小的一倍大,确保在超高清屏中,图片不失真!

亦或者

使用 CSS3 的 ”媒介(media)“ 技术,原理是,判断当前设备的dpi 根据dpi 在哪一个值范围内,调用不同的样式,引入不同的尺寸图片。示例:

浅谈移动端开发

css代码的意思为:判断当前是设备dpi比例是否为 1.5, 如果是,则加载 bg-1.5.png 的图片,从而降低低dpi的用户,加载过大的图片(优点),而缺点也是显而易见,需要为不同的dpi制作不同的图片。所以在做移动端图片的时候,根据不同的需求,使用不同的方法,随项目而变!

结语:
移动互联网是现在的发展趋势,技术这东西都是日新月异,需要不断的积累及实践创新。移动端,一个新的领域,一个新的挑战,值得进入一探究竟!才疏学浅,很多知识点未涉及到,望指导批评,与之共勉!