本文主旨是告诉你移动端网页和传统PC端间的不同特性，每个特性都加了知识点和相关链接，希望这些知识可以帮助你更好的布局移动端网页。
viewport
在手机浏览器里打开一个网页，如果没经过优化，你会发现，网页会占满整个屏幕，而且文字都很小。这对手机用户是非常不好的体验，这里涉及到的知识叫viewport。加上这个meta标签后，页面就会按照手机的屏幕来适配了。相关链接1、链接2。
推荐viewport写法：
<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui">
devicePixelRatio
然后你会发现，为什么iPhone 4的640*960分辨率，即使网页上设置了上面meta设备宽度等于屏幕宽度，也不对？实际网页却是320*480？为什么你在网页里加了一个img标签，插入一张图片，结果手机显示特别模糊？这里的知识点叫devicePixelRatio。相关链接1、链接2。
所以移动端的网页建议默认最小宽度为320px，当然更高级的办法是自适应布局。如果想让图片在手机里显示更为清晰，就需要2倍甚至更大倍数的图片尺寸了。例如一个div的宽高是100*100，背景图必须得200*200，然后background-size:cover；或者img显示大小是100*100，你给的图片实际尺寸得200*200，这样显示出来的图片就比较清晰了。
Flexbox
PC端最常用的布局包括浮动float，但移动端很少用浮动float，而是用Flexbox。Flexbox非常强大，以前你在PC端里头疼的不固定宽度并排且占满整行、不固定大小水平垂直居中等，遇到Flexbox后，都是轻而易举的。相关链接1、链接2。
由于浏览器众多，Flexbox的规范一直在制定和变化，导致代码很混乱。因为我没有足够多的设备来测试，这里只提供同事找的兼容大部份浏览器的代码：
display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex; -webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;
tap
PC端页面上会有很多hover效果，但到了移动端完全不一样，没有hover但有active。所以写按钮样式的时候，加:active会使得网页效果更加活泼。以前JavaScript里会有click事件，而手机里变成了touchstart、touchmove、touchend等。相关链接1、链接2。
手机上最简单的点击js：
document.querySelector("body").addEventListener('touchstart',function(){ alert('测试点击'); },false)
Zepto
如果你在PC端很依赖jQuery，那么抱歉，移动端可没法这样搞。一个jQuery库接近100k，这对于国内2G用户，每秒下载速度5-10k，真是噩梦。不过好在国外人已经考虑到我们这一群人，用jQuery的语法打造了移动端的js库Zepto。如果你会jQuery，再来使用Zepto，还是很容易入门的。相关链接1、链接2。
Zepto号称gzip压缩后只有10k以内，但默认其实只有几个基础的模块。如果要使用animate、touch等更多的模块，就得增加对应的代码，这样就增加了体积。所以按照自己的需求来取舍模块吧。
尽量用css的办法来实现特效
网页里，js能少用就少用，移动端更是如此。况且移动端大部份CSS3属性都有支持，所以通过最简单的js和CSS3配合来做特效是最好的办法。例如我写的一个简单的【DEMO】，因为是用touchstart写的，所以PC端里没效果。或者扫描二维码看效果：
如果你是用Zepto，也尽量用addClass、removeClass、toggleClass、hasClass方法来操作类名，而不要去操作DOM。
暂时想到这些，想到了再加。
minimal-ui貌似是ios7中safari新加的特性
准确的来说，是ios7.1 ❗
为什么WP手机没有效果呢？
请问是什么设备？WP版本？我看了下，猜测应该可以兼容WP8才对。
好像确实是不行，是WP8，8x
为何这样屌？
还是那么专业，呵呵。
很不错，水准非一般！
还好Zepto支持基本都jquery语法。不用多看文档了
我唯一看的，就是Zepto有木有这个属性。。。
来着很多次，头一次发现，居然右下角有个主题的连接。。。。。。一直以为这主题是你随手写的呢。。。。。
我审美不是这样的
专业人士~
好像可以使用image set 兼容视网膜，最近公司要上移动端，手持Nokia 多年的我完全没经验~~ 😕
这个之前看过，不过给忘记了。试试看效果怎么样
实测，image set不支持android 4.1和2.3
谢谢，先记下来，等公司买完测试机我再测试下。
限制流量是最大的阻碍，这样4G没啥意义，100k对于3G的速度来说也没啥，杯具