移动端Web开发

摘要：

　　主要介绍移动端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】媒体查询，为了响应式设计而生