zoukankan      html  css  js  c++  java
  • 记录一下最近开发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.标题文字自适应宽度,超出后为...

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

    宽了就显示多,窄了就显示少,显示不下去就变为...
        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库,这么大的库也挺愁人的..

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

  • 相关阅读:
    165. Compare Version Numbers
    163. Missing Ranges
    162. Find Peak Element
    161. One Edit Distance
    156. Binary Tree Upside Down
    工欲善其事-Eclipse设置
    2016年1月15日面试某互联网公司总结(一)
    以前用SQL实现的机构职能树,再看看
    Sublime3学习笔记
    Android之EACCES (Permission denied)与Permission denied异常探密
  • 原文地址:https://www.cnblogs.com/margo/p/3489156.html
Copyright © 2011-2022 走看看