摘要:
原文:http://www.grycheng.com/?p=472 承接上文《玩转HTML5移动页面(动效篇)》,上次说的是让页面动起来的一些小技巧。而页面动起来的根基是功能可用的页面,因此有必要分享一些优化细节的技巧和方向,熟悉掌握一些方法论还是会对页面开发大大提高效率的,并且也能防止疏忽缺漏。 阅读全文
摘要:
原文:http://www.grycheng.com/?p=458 作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢? 这次就来谈谈一些动画设计的小技巧,能在 阅读全文
摘要:
原文地址:http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html 曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代,为了处理各终端的适配而乱了手脚。对于混迹各社区的偶,时 阅读全文
摘要:
function is_weixn(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=="micromessenger") { return true; } else { return false; } } 阅读全文
摘要:
一、手机上的触摸事件 基本事件: touchstart //手指刚接触屏幕时触发touchmove //手指在屏幕上移动时触发touchend //手指从屏幕上移开时触发 下面这个比较少用:touchcancel //触摸过程被系统取消时触发 每个事件都有以下列表,比如touchend的target 阅读全文
摘要:
除非你的应用程序限定了只在移动设备直立状态或水平状态下使用,一般情况下,你需要调整一些设定。即便你设计的布局流畅时尚,你可能需要改变某些编程代码。通常有以下一些小的策略用于检测移动设备方向的改变。 orientationchange事件 你等待一个移动API,一个简单的窗口orientationch 阅读全文
摘要:
js判断屏幕横竖屏: ipad: 90 或 -90 横屏 ipad: 0 或180 竖屏 Andriod:0 或180 横屏 Andriod: 90 或 -90 竖屏 iphone 、ipad禁止横竖屏切换、强制横竖屏 阅读全文
摘要:
横竖屏切换检测 移动端Web开发如何处理横竖屏 阅读全文
摘要:
今天在某个群里面闲逛,看见一个童鞋分享了一个携程的移动端的页面。地址这里我也分享下吧:http://m.ctrip.com/html5/在手机端我都很少用雪碧图合并定位图标,用的比较多就是用字体图标来代替,有些图标不多的时候就自己单个的切出来控制了。 看了下携程的手机端的网站这些图标是用了雪碧图来合 阅读全文
摘要:
很多前端工程师在开发手机页面的时候,发现视觉设计师们喜欢用微软雅黑作为中文字体进行设计,于是写页面的时候也定义 font-family 为微软雅黑,后来发到线上后,细心的产品经理发现页面的字体不是微软雅黑,要求马上修改,于是就惊呆了,还跟产品争执一番。实际上手机系统 ios、android 等是不支 阅读全文
摘要:
原文:http://www.grycheng.com/?p=2411 微信 webview 内置了调整字体大小的功能,对于网页的可用性来说是一个很实用的功能。一些网页的字体设置过小导致用户看不清文字,调整字体大小即可解决这个问题。 但是对于一些追求显示效果的移动端页面来说,字体大小的调整可能会导致部 阅读全文
摘要:
原文地址:http://www.grycheng.com/?p=2188 在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验。抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http请求合并,缓存管理,图片压 阅读全文
摘要:
什么是rem 参照 详解移动端rem变革 在我看来,rem就是1rem单位就等于html节点fontsize的像素值。所以改变html节点的fontsize是最为关键的一步。根据手机宽度改变相对大小就可以实现自适应了,就不用什么媒体查询那些的。 我们的设计图往往宽度是640或者其他尺寸的,不过我建议 阅读全文
摘要:
研究移动端页面已经有许久了,一直执着于rem来开发,不谈性能怎么样,单从工作效率上看影响了不少,首先要固定设计稿的宽度,一般都是固定在640px,然后在根据根目录的字体大小来计算出每个元素的rem的值,无疑在开发中切图,每个元素都要去计算一边,是不是感觉很麻烦,有没有一种方法,像切PC端页面一样,切 阅读全文
摘要:
做移动web开发免不了用微信扫描页面来进行调试,android版微信浏览器一直都默认缓存html静态资源,每次静态资源变化甚至新内容发布的时候在微信浏览器上都极有可能不能更新,很多时候要清理微信缓存才能看到效果,很是烦人。部分客户装了QQ浏览器,微信实际调用的是QQ浏览器,有时候甚至光清理微信缓存都 阅读全文
摘要:
移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO1,加载底部 DEMO2,加载顶部、底部 DEMO3,固定布局,加载顶部、底部 使用方法 引用css 阅读全文