开发移动端app时需要注意的事项

如今的网络宣传并不只是针对电脑，手机也成为互联网重要的组成部分。如今网站建设，不仅需要PC端，还需要做手机网站，微信网站等，那么手机网站相比较传统网站建设有哪些注意事项呢？

为移动设备添加 viewport

viewport 可以让布局在移动浏览器上显示的更好。 通常会写

<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> 

content 参数：

width viewport 宽度(数值/device-width)
height viewport 高度(数值/device-height)
initial-scale 初始缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户缩放(yes/no)

网站尽可能简洁。

• 手机屏幕相比PC毕竟小了很多，手机网站不能堆积过多的元素，应要做到简洁，而在简洁同时又应该保证核心的内容放在最明显的位置。导航功能也要做到尽可能的简单明确。手机端的网站不需要像PC端那样面面俱到，只要能够把用户最需要的信息展现给他们即可。此处还应注意避免弹窗广告这种灾难般的用户体验设计。
• 由于是手机用户，大多数用户浏览网页的时间是零碎的，不可能耐心点击很多的页面。因此，要尽可能精简移动网站设计。
• 并不是所有用户的手机网络环境时刻都很好的，因此网站在开发的时候就要尽量精简网站结构以优化加载速度，其中的图片、元素都要针对移动端进行压缩和优化，尽量减少复杂的动态功能，加快加载速度的同时还要减少用户手机流量的消耗。

块级化a标签

手机屏幕大小无法与电脑相比，操作是通过手指触摸点击，肯定也不如使用鼠标光标精确，所以尽量保证将每条数据都放在一个a标签中，为何这样做？因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。

自适应布局

移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？

允许网页宽度自动调整

　<meta name="viewport" content="width=device-width, initial-scale=1" />

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

不使用绝对宽度
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。

具体说，CSS代码不能指定像素宽度：

width:xxx px;

只能指定百分比宽度：

width: xx%;

或者

width:auto;

流动布局（fluid grid）

"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。

　　.main {
　　　　float: right;
　　　　width: 70%; 
　　}

　　.leftBar {
　　　　float: left;
　　　　width: 25%;
　　}

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

另外，绝对定位（position: absolute）的使用，也要非常小心。

选择加载CSS

"自适应网页设计"的核心，就是CSS3引入的Media Query模块。

它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。

　　<link rel="stylesheet" type="text/css"
　　　　media="screen and (max-device-width: 400px)"
　　　　href="tinyScreen.css" />

上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。

　　<link rel="stylesheet" type="text/css"
　　　　media="screen and (min-width: 400px) and (max-device-width: 600px)"
　　　　href="smallScreen.css" />

如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

CSS的@media规则

　　@media screen and (max-device-width: 400px) {
　　　　.column {
　　　　　　float: none;
　　　　　　width:auto;
　　　　}
　　　　#sidebar {
　　　　　　display:none;
　　　　}
　　}

上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。

图片大小还有图片的质量清晰度

手机网站设计注意网站的图片大小，清晰度要适中，如果上传的图片清晰度比较低的话打开就会显示很模糊的效果和影像。在保证图片的清晰度之外还要保证图片的大小，因为手机本来就和电脑是不一样的，不管是从这两者之间的屏幕还是内存方面，都不一样，所以这个时候就需要对图片有高要求，都能够被正常打开浏览，而且还要画质非常的清晰，不能因为手机比电脑小，所以手机上浏览的画面质感就比电脑端的要差，这样的对于用户的体验是非常不利的。

触屏操作手感

手机操作由于采用触屏，因此要在设计时考虑触屏操作。元素不能过于紧凑，按钮必须做的明显而容易触按；人们习惯单手操作，因此左上角部分是比较难一点按的地方，应减少这方面的操作点，把便捷功能放置在屏幕偏右下的位置。

使用rem

在编写CSS时，开发者把容器（不管是外层容器还是内层）的宽度定死。为达到适配各种手持设备，
解决方法：使用rem布局，rem是css3新引入的单位，在pc端会有兼容性的问题，对移动端比较友好。简而言之就是通过动态设置html根元素的fontsize，等比缩放元素大小来自适应移动设备。

(function () {
    document.addEventListener('DOMContentLoaded', function () {
        var html = document.documentElement;
        var windowWidth = html.clientWidth;
        html.style.fontSize = windowWidth / 6.4 + 'px';
        // 等价于html.style.fontSize = windowWidth / 640 * 100 + 'px';
    }, false);
})();

// 这个6.4就是根据设计稿的横向宽度来确定的，假如你的设计稿是750
// 那么 html.style.fontSize = windowWidth / 7.5 + 'px';

参考文章:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html