“移动端”宴席知多少
原文： http://adt.aicai.com/index.php/archives/179/javascript
瞎折腾移动端的项目已经很长一段时间了，并不像其它企业同样，能够有项目组去完成，基本都是一我的瞎尝试，时而web，时而web app。恍恍惚惚过了这段岁月，也不晓得本身忙了啥。总叫别人去总结，让别人学会总结，也该为本身总结总结了。也为了团队之间更好的知识共享吧。如何开发移动端就跟如何上菜同样，上菜有规则，先冷后热，先菜后点，先咸后甜，先炒后烧等等。按照必定的程序来才能恰到好处地掌握。那么，如今仍是上菜吧，客官等久了... ...php
前菜（凉菜，冷盘）
1、移动端开发与PC端开发不一样 你们都知晓，手机种类千千万，也致使移动端开发面对的屏幕尺寸是各类头疼。 Web：固定布局和弹性布局 Web app：响应式布局css
2、调试工具 firefox的响应式设计视图:Firefox 浏览器内置了 自定义设计视图 的功能，能够经过 Firefox->Web 开发者->自定义设计视图（或者摁下 Shift + Ctrl + m ）。相比网络工具，运行更加流畅，无需联网。html
Chrome开发，chrome浏览器也有个Emulation，如图：前端
另外，就是设备上的调试，方法不少。html5
1. 直接把作好的静态页面放到手机用浏览器打开查阅 2. 在本地搭建环境，好比php环境，局域网访问ip查阅页面（有搭建过博客的都知道） 3. 远程调试java
A:Android 设备 Chrome 远程调试 B:uc浏览器开发者调试android
开胃汤
那么，问题来了，移动端开发到底该如何下手？ 1．关于viewportios
- a)概念：设备的pixels和css的pixels（整体而言，你只须要关注CSS的pixels，这些pixels指定你的样式被如何渲染。 ）
- b)概念：视窗 viewport（viewport的功能在于控制你网站的最高块状（block）容器：<html>元素。 ）
下面是link的一些用法，可是移动端也好web端也好，为了减小HTTP请求数， 我的建议最好能使用媒体查询来解决的能够尽量的用媒体查询。css3
媒体查询以下：
头菜
做为头菜，通常宴会来讲，头菜是表明性的菜点。那么说到移动端呢？
-
移动端的reset
时过境迁，Reset 逐渐淡出的前沿前端的视野，normalize.css 取而代之。normalize.css，统同样式的同时保留可辨识性；reset 统同样式，彻底没有可读性，破坏原有标签的语义化。针对每一个项目的不一样，各自能够基于Normalize.css，根据目前咱们你们的使用习惯进行了一些清零及移动端的特色添加一些基础样式。
在这里会提到一个rem,想当初应该不少人也讨论研究过px，pt，em等单位吧。rem是CSS3新引进来的一个度量单位，举个例子：“em”是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能须要知道他父元素的大小，在咱们屡次使用时，就会带来没法预知的错误风险。而rem是相对于根元素<html>，这样就意味着，咱们只须要在根元素肯定一个参考值。
浏览器的基准字号设置为 62.5%，也就是 10px，如今 1rem = 10px —— 为了计算方便。而后在body 上应用了 font-size: 1.6rem;，将页面字号设置为 16px。
html {font-size: 62.5%;} body {font-size: 1.6rem; /* =16px */}能够用如下的代码片断保证在低端浏览器下也不会出问题
html { font-size: 62.5%; }body { font-size: 14px; font-size: 1.4rem; } /* =14px /
移动端的html5+css3
css3代替DOM animation,使用setTimeout定时器, 定时修改DOM元素的style属性。 css3使用设备GPU渲染，动用硬件设备自己的计算能力来作一些展现，效率上要比DOM animation要高不少。
@keyframesanimation-name（动画名称）animation-duration（动画持续时间）animation-delay（延迟执行时间）animation-timing-function（动画形变函数指定）animation-play-state（播放状态指定）animation-iteration-count（无限循环）
至于HTML5，你们目前用的最多的也就仅仅是那几个标签而已，想详细了解的自便吧。好比：
<input type="text" placeholder="规定帮助用户填写输入字段的提示"><input type="number"><input type="date"><input type="range"><input type="color"><input type="email"><input type="search">
移动端的javascript
先说这一类的框架吧： JQuery mobile，Sencha Touch等都是很庞大的UI框架。 Zepto.js：框架小，类jQuery，没有多余的其余模块，适合团队本身扩展。（不支持WP） 没有一个很好的团队去折腾的话，仍是建议使用jqm，由于你到后面仍是会改为jqm搭配Hammer.js来搭建
提及移动端的javascript，使用手势操做代替鼠标输入/出事件。开发者大多数会使用封装的 tap 事件来代替click 事件，所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成。那就先来看看PC端的一些事件：(mousedown, mouseup, click)
移动端的手势事件： touchstart //当手指接触屏幕时触发 touchmove //当已经接触屏幕的手指开始移动后触发 touchend //当手指离开屏幕时触发 touchcancel //当在滑动手机的过程当中忽然出现一个系统事件，好比电话。这会就cancel掉。（基本不多用）
为什么要用touch事件代替click事件？ - click事件300ms延时 - touch事件支持多点触摸 - 手势操做
移动端的css3的自定义字体（@font-face），前一篇文章有作介绍。这里就不详细述说。
主菜
有人会问，图片该怎么切，拿到的psd文件尺寸是多少，按照何种尺寸去制做？仍是无从下手。那么，移动端页面那么小，作页面的时候按照何种安全可视尺寸来呢？
alert('width:' + window.innerWidth + ';height:' + window.innerHeight);
目前我知道的移动端可视区尺寸
- iPhone4/iPhone4s 320 * 372 / 320 * 441 (已隐藏URL与状态栏)
- iPhone5/iPhone5s 320 * 460 / 320 * 529 (已隐藏URL与状态栏)
- Note2 360 * 567 (未隐藏URL与状态栏)
- iPad 3/4 768*928 (未隐藏URL与状态栏)
- GALAXY SIII 360 * 567 (未隐藏URL与状态栏)
- 小米2A 360 *567 (未隐藏URL与状态栏)
- HTC G10 320 * 460
- 酷派大神 400615/400568(未隐藏URL与状态栏)
设计稿按照640的尺寸去切（有的人按照480的去切，主要是考虑图片资源的浪费），而后页面能够看成是320的来写，也就是说，字体大小以及图片大小，在页面制做的时候都须要除以2。
为何要按照640的来切，却用320的来制做呢？由于设备分辨率太多，图片切大的去压缩，在高分辨率的设备，图片就不会变得很小了。 其实结果可知，手机端页面，由于上面viewport设置了，通常浏览器都是320，360，400这类宽度制做页面。
一、meta，link都有了 二、css reset也有了 三、尽量的使用Flexbox 布局，尽可能放弃float 四、图片的切法和媒体查询 五、移动端js的事件使用 六、最后手机测试完美收工 （简单粗糙上档次吧？）
甜品（饭后闲谈消化）
这里我必须说的是局部刷新，定位问题吧。 position:sticky与position:fixed布局，由于存在太多兼容bug，因而都会利用iscroll来解决这个问题。 如何使用，请移步iscroll官网查阅，这里不做详细说明。由于这里每个点均可以来了说一篇或者好几篇文章。
盒子边框溢出 当咱们指定了一个块级元素时，而且为其定义了边框，设置了其宽度为100％。按照盒子模型，就会发现该元素的左右边框各1个像素会溢了，致使出现横向滚动条，这时候咱们能够为其添加-webkit-box-sizing:border-box用来指定该盒子的大小包括边框的宽度。
ios数字颜色样式超过9位后失控 这个问题我不知道该怎么描述，就是在ios中，当数字超过9位数时，浏览器会给这个数字默认加上一个颜色，不管你设置什么颜色都无效。
css3关于background-size缩放背景图像的使用;如何用flex和translate等分，居中。