文档介绍：移动 Web 前端开发前言这篇文章就当进入移动 web 开发的宣誓稿吧, 作为移动领域的门外汉, 在这段时间的接触后, 发现前端开发这潭水愈发的深了! 不多言,进入主题。我将从下面几个方面探讨移动 web 前端开发:分辨率、屏幕、手机浏览器、设计理念、响应式 web 开发。分辨率手机分辨率比 PC 分辨率要庞杂得多, 各种分辨率有木有?大小差距那么大有木有?这在一定程度上给页面制作带来了不小的麻烦。所以针对这样的因素,必须有充分的考虑。我从两个方面进行思考: 1) 市场上主流手机生产商的产品分辨率。经过调研发现, 目前主流的手机分辨率为: 480*800 像素、 320*480 像素,而 1280*72 0 像素( 720P )会是接下来的趋势。这些都是很粗略的统计,要有精确的数据需要花费不少的精力,那是数据分析人员的工作。 2) 项目目标群所持设备的分辨率。项目目标群即用户,用户拥有什么样的手机分辨率,从一定程度上来说比第一点来得更加重要,它决定着项目开发的方向。屏幕目前市场上的手机屏幕分为普通屏幕和视网膜屏幕两种。视网膜屏幕与普通屏幕最大的区别在于它的显示性能更优秀、图像更细腻。苹果公司从 iphone4 和 newpad 开始采用视网膜屏幕。视网膜屏幕的评定指标是以像素密度超过 300ppi 为准。以 iphone4 为例,像素密度的计算方式如下: 1) 分辨率 640:960=2:3 2) 勾股定理取对角线值,根号 22+32= 3) 像素密度(960*)/(*3)=326 ,其中是屏幕尺寸, 3 是对应于 960 的最终值。计算过程中有误差,不必太在意。视网膜屏幕的出现又带来了一个新的概念: “设备像素”。设备像素是要跟 css 像素做区分的。有关这方面的研究,您可以参考张鑫旭的这篇文章《视网膜 New iPad 与普通分辨率 iPad 页面的兼容处理》。里面的阐述很细致,我从中受益匪浅。手机浏览器浏览器已经逐渐从传统桌面转向手机端, 竞争也越来越激烈。目前国内市场主流的手机浏览器有: UC、百度、欧朋、 QQ、海豚、 safari 、 Chrome ,这些浏览器都是基于 webkit 内核的,兼容性方面不存在问题,同时对 html5 和 css3 的支持很好,所以,大胆地应用 html5 和 css3 技术吧。设计理念( 3S 原则) 3S 原则是指: Simple 、 Small 、 Speedy 。这是国外一位大牛总结的,可以参见《 Mobile Web Design: Best Practices 》。对这三点,我深表认同。想说的是 Speedy 严格意义上应该算是结果,而不能归为原则。 Web 设计方面,我一直崇尚简约风格:便捷的操作、清爽的界面、友好的提示、少而小的图片、精简的代码等,当做到了这些,相信网站会变得 Speedy 。移动 web 开发应该把手机的固有特性优先考虑。首先,手机屏幕相比桌面屏幕很小,所以满屏可显示的内容不多,这就要求我们在页面设计的时候选择好适当的字号,还得考虑文档内容的优先次序,把重要内容靠前显示;其次,手机的交互方式让我们得去重新考虑页面元素的设计。桌面 web 以鼠标操作为主,这样可操作的范围很精确,移动 web 以触控操作为主,手指的操作范围比较宽泛, 反映在页面上,