主机格调

本文主旨是告诉你移动端网页和传统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,而是用FlexboxFlexbox非常强大,以前你在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事件,而手机里变成了touchstarttouchmovetouchend等。相关链接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以内,但默认其实只有几个基础的模块。如果要使用animatetouch等更多的模块,就得增加对应的代码,这样就增加了体积。所以按照自己的需求来取舍模块吧。

尽量用css的办法来实现特效

网页里,js能少用就少用,移动端更是如此。况且移动端大部份CSS3属性都有支持,所以通过最简单的js和CSS3配合来做特效是最好的办法。例如我写的一个简单的【DEMO】,因为是用touchstart写的,所以PC端里没效果。或者扫描二维码看效果:

如果你是用Zepto,也尽量用addClassremoveClasstoggleClasshasClass方法来操作类名,而不要去操作DOM。

暂时想到这些,想到了再加。

>>原创文章,欢迎转载。转载请注明:转载自西门的后花园,谢谢!
>>原文链接地址:http://ons.me/475.html