摘要：
前段时间项目上有一个拍照的需求，对于客户端当然是个小问题，但是PM要求该功能需要在网页版的页面上同样要实现跟客户端一样的体验！看到这个需求有点蒙，首先还不确定网页如何调用系统相机，选本地照片的话弄个应该就ok，其次手机拍一张照片都是几兆几兆的，如果不压缩一下图片，在这蛋疼的网络环境下，基本是没办法传... 阅读全文
摘要：
最近在测试机测试离线功能时发现, 如果更改了html静态页面或js文件且更新了manifest, 刷新两次(嗯, 你没看错,是两次, 第一次于后台更新app cache, 第二次应用新cache)就会应用上新的代码. 但是, 发布到正式环境之后, 就不能更新了, 把F5按烂了, 也没什么变化. 当然手机清除 Cookie 和 数据 是没问题的, 但是我们没办法要求用户这样做(这种现象只是个别低端手机会出现这种情况，可气的是iphone 4 IOS 7.0.4 的 Safari也会出现这种).通过抓包发现, 无论哪个环境, manifest更新了, 浏览器端都能抓取新的, 在chrome的控制台 阅读全文
摘要：
近期项目中使用iScroll遇到一个问题，在设定scroll-box为横向滚动时，如果你手指放在该区域，将无法拉动页面，也就是说该区域取消了默认事件。这个体验是实在是无法接受，这样子照成无法拉动页面，查看滚动区域下面的内容。Google了一下子，有个高手给出了解决方案，参考地址：http://stackoverflow.com/questions/7800261/iscroll-with-native-scrolling-on-one-axis思路如下：我们知道正常调用触摸事件scroll是这样子的 new iScroll("scroll-box",{hScrollbar: 阅读全文
摘要：
webkitTransitionEnd事件在WebKit引擎的浏览器中，当CSS 3的transition动画执行结束时，触发webkitTransitionEnd事件。在CSS 3中，使用如下所示的样式代码定义transition动画。上面这段代码执行功能同样为在0.5秒内将元素向右移动100像素后将其返回。我们可以在这个动画结束时触发的webkitTransitionEnd事件中执行一些代码，例如显示动画已执行结束，以及动画的执行次数。移动手机web页面多次触发webkitTransitionEnd的问题 执行animation... 阅读全文
摘要：
我们知道mobile设备上监测转屏的事件是orientationchange，但这个事件支持得不太好,有些android就不支持orientation事件zepto.js中扩展了一个$.support 来检测是否支持orientation(function($) { /** * @name $.support * - ***orientation*** 检测是否支持转屏事件，UC中存在orientaion，但转屏不会触发该事件，故UC属于不支持转屏事件(iOS 4上qq, chrome都有这个现象)*/$.support = $.extend($.support || {}, ... 阅读全文
摘要：
一、概念离线存储是HTML5中的一个重要特性，顾名思义就是将一些资源文件保存在本地，这样后续的页面重新加载将使用本地资源文件，这样子使得你的web应用可以在用户离线的状况下进行访问，很显眼有三个好处：最直接的好处就是用户可以离线访问你的web应用因为文件被缓存在本地使得web页面加载速度提升许多离线... 阅读全文
摘要：
大家知道，原生的javascript绑定事件方法 ：如下1 handleEvent 测试1 var handleEvents = document.getElementById("handleEvent");2 var callback = function(){ alert("this is a test!");}3 handleEvents.addEventListener('click', callback, false);今天发现addEventListener 的第二个参数除了可以传入函数外 还可以传入一个对象， handleE 阅读全文
摘要：
Zepto是一个面向高级浏览器的JavaScript框架的，并实现JQuery的大部分API，尤其针对手机上web开发(流量金贵，JQ又太重了)，因此选择Zepto.js一个非常不错的选择！如果要真正去了解一个框架，去读其源码还是最直接的方式 ，本系列会根绝我对zepto源码的理解，对每个功能模块逐个解析。总体架构： 1 var Zepto = (function() { 2 zepto.Z = function(dom, selector) { 3 dom = dom || [] 4 dom.__proto__ = arguments.callee.prototype 5... 阅读全文
摘要：
前几天做公司和开心网合作项目的时候 碰到iframe 跨域自适应的问题 刚开始很迷惑 开心网那边技术工程师给我发了一段这样子的代码<body onload="javascript: setHeight();"><script>function setHeight(){ var dHeight = document.documentElement.scrollHeight; ... 阅读全文