摘要:
主要介绍移动端Web开发需要注意的要点,以及一些基础知识,如手机尺寸,手机浏览器,设计理念。
目录:
分辨率
手机浏览器
设计理念(3S原则)
响应式Web开发
移动端开发的水很深啊,下面就上面目录这几项说起吧。
分辨率
手机分辨率要比PC分辨率庞杂的多,各种尺寸,各种比例。主要考虑一下两个方向
1)主流分辨率。经调研发现,目前主流手机分享率为:240*320像素,320*480像素,480*800像素(居多),640*960像素(居多),480*854(9:16)像素(少),1280*720像素(多),1280*800像素,1920*1080。这个我想最好有数据分析部分来看。
2)目标群所持设备分辨率。 通过自己网站的统计代码统计得到的结果。这个比1更重要,决定了你将做的产品如何设计。
视网膜屏幕的评定标准是分辨率超过300ppi。
由视网膜屏幕又带来一个新的概念:“设备像素”。有关这方面的研究,见《视网膜New iPad与普通分辨率iPad页面的兼容处理》。
手机浏览器
国内手机浏览器,主流有UC浏览器,QQ浏览器,海豚浏览器,百度浏览器等都是基于Webkit内核,对HTML5&CSS3支持都很好,所以大胆的使用吧。
设计原则(3s)原则
Simple、Small、Speedy.《Mobile Web Design: Best Practices》。
Speedy其实是Simple, Small的结果。页面简单,代码小,自然速度就快起来了。
Web设计方面,简约风格:便捷的操作、清爽的界面、友好的提示、少而小的图片、精简的代码等,当做到了这些,相信网站会变得Speedy。
移动web开发应该把手机的固有特性优先考虑。首先,手机屏幕相比桌面屏幕很小,所以满屏可显示的内容不多,这就要求我们在页面设计的时候选择好适当的字号,还得考虑文档内容的优先次序,把重要内容靠前显示;其次,手机的交互方式让我们得去重新考虑页面元素的设计。桌面web以鼠标操作为主,这样可操作的范围很精确,移动web以触控操作为主,手指的操作范围比较宽泛,反映在页面上,我以按钮为例,对于小屏幕低分辨率的手机来说,可以把按钮设置为.button{display:block;},而对于大屏幕高分辨率的手机,可以设置为.button{display:inline-block;},这是按钮。对于链接列表,要设置适当的行高,避免可点击的范围太小而操作失误;最后,图片。手机开发应尽量避免图片的使用,像圆角、阴影、渐变等以前在桌面不好实现的情况,在手机开发上已经不存在了,完全可以采用css3来实现,所以设计师在设计psd效果图的时候,就把效果做出来,但切图的时候就不必给出。
响应式设计
见我的另一篇文章 【media-queries】媒体查询,为了响应式设计而生