记录一下最近开发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库，这么大的库也挺愁人的..

 

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