记录一下最近开发web移动前端的过程

两个项目

第一个是公司网站的移动端，我所在的公司是做某方面的新闻站的。

所以说页面基本是以一条条的新闻+图文混排为主，顶部有一个自动slider+触屏滑动的功能，

使用的是swipe插件，轻量，简洁非常好用。一看就懂 特别赞。

采用的的是弹性布局

---------------------------------------------------------------------------------

其中记录了一些兼容方面的css属性，做过移动端的基本可以跳过: )

1.input，button标签在iphone下会自动圆角，

这个比较简单，加一个-webkit-appearance:none;就可解决圆角问题。

2.写代码的时候经常需要加入padding这个属性来做，但是如何计算width+padding=?最终宽呢，比较简单的。

加入以下属性后，可让box的宽不受padding的干扰。

举例：假如宽为20em,左右内边距各为5em，则最终宽为30em，然而加入此属性后宽仍为20em。

-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box

3.标题文字自适应宽度，超出后为...

既然是弹性布局，那么宽度不一，但行文字又不能限制截取多少个字段，于是我考虑用以下代码。

宽了就显示多，窄了就显示少，显示不下去就变为...
width:95%;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow:hidden

4.媒体查询，这个是作为弹性布局最关键的一点。

比如我五寸的屏幕，分享的icon我可以看的很清楚，但是在iphone4上用那么大的icon就导致页面变的笨重了。

还有如果横屏会发生什么？自己有时间可以试试。

5.表单控件模拟，如果你和我一样是半个设计出家的话..自己做一个点击前点击后的，写个切换的js就搞定了.

要么就上网找模拟控件的包自己引用，摘出来吧 ..

因为默认的表单控件在手机端确实是非常的不好用。要么太小，要么样子难看，反正我是没找到优点..放弃它吧..

6.最后一点有关用户体验的，click与tap。

这一点我承认没有做好，用click做了效果，导致页面每次点击都会有一些延迟，据资料上说是延迟0.3秒，虽然不多，但是确实不怎么友好，

公司主要也不是做手机端，也就属于能用就行阶段，对这个要求不是很严格，我也就没做..（偷懒了..）

tap属性的话需要用js封装，因为它不是一个可直接调用的方法，我对JS掌握的也不深，所以就抛弃了它..虽然网上能找到封装好的代码吧..

这是新闻页的一些总结，遇到的问题还算比较基础，做下来还是比较简单的，有问题找度娘没错 ~

最后一套页面下来一共是 10个html+12个CSS+图片总共下来是 720kb，压缩后应该是可以达到700KB的

新闻页还是比较简单的，因为不涉及过多的特效，以加载快为主，但是第二个项目就比较苦了..

第二个项目是通过微信+公司网站推广的一个讲述宣言的活动，把自己的留言通过微信记录下来发布到我们这个手机端的页面。

登录手机端页面通过html5来播放，每个页面要加载10个音频，不过由于是微信压缩过的，所以也并不是太大。

但是从技术层面要解决的问题有 ：

1.手机端html5技术进行模拟控件，美化控件，保证美观的同时功能完善。

2.JS控制html5模拟，多个音频要考虑是否会冲突，失效问题。

3.就是兼容问题了，我自己用JS模拟了一个控件出来，我安卓的挺好用的，但是在iphone上就瘫了..于是含泪删掉自己辛苦攒（没错是我cuan出来的..）的JS..

上百度开始寻找解决方法了.. 最后用了据说是微信web版都在使用的第三方控件，拿来后发现确实好用，是开源的一个帖子 html5 mp3插件推荐系列的..

4.新的问题出来了，就是我点击播放的时候开始加载，如果音频过长加载过慢，影响用户体验，

但如果预加载的话太费流量了..这个我觉得好像解决不了

自己手贱用一首5MB的歌曲模拟了十个控件预加载，忘连公司wifi，结果过了几秒后弹出提示日流量已超20mb..我赶快给关掉了..

现在项目中又有一个头疼的问题..模拟app做一个底部固定留言块，浏览器垂直滚动也不会发生变化 . 可以输入文字，安卓是解决了，没问题，

但是在iphone下一点击固定的input框，这个框就跑屏幕中间去了，特别难看..整不知道怎么解决呢..而且还引得jquery mobile库，这么大的库也挺愁人的..

一时半会儿也想不到其他说的了..就先这样吧.. 没怎么写过博客 不知道写的是否有用 ，还请赐教，哈哈 ~