语源科技BlogJava-∪∩deniable Designhttp://www.blogjava.net/tidelgl/个人JAVA版GAE(google app engine),struts2+jpa+jQuery开发,互相交流 http://iunbug.appspot.com/zh-cnTue, 28 Apr 2026 10:47:46 GMTTue, 28 Apr 2026 10:47:46 GMT60Chrome全平台更至 22版本后，给前端调试带了几个另人兴奋的实用功能http://www.blogjava.net/tidelgl/archive/2012/10/09/389236.html∪∩BUG∪∩BUGTue, 09 Oct 2012 03:39:00 GMThttp://www.blogjava.net/tidelgl/archive/2012/10/09/389236.htmlhttp://www.blogjava.net/tidelgl/comments/389236.htmlhttp://www.blogjava.net/tidelgl/archive/2012/10/09/389236.html#Feedback0http://www.blogjava.net/tidelgl/comments/commentRss/389236.htmlhttp://www.blogjava.net/tidelgl/services/trackbacks/389236.htmlChrome全平台更至 22版本后，给前端调试带了几个另人兴奋的实用功能

Posted by  on Oct 9, 2012 in Web App | 0 comments

Chrome全平台已经更新版版本 22.0.1229.79，给前端调试带了几个另人兴奋的功能：

1.Elements面板，右键元素节点选择“Scroll Into View”，可以快速在页面视图中快速定位到当前节点

2.Elements面板，右键元素节点选择“Break on…”则可以监听元素子元素变化，属性变化，节点被移除时触发断点debug

3.Elements面板，右键元素节点选择“Force Element State”则可以应用元素的“:active,:hover,:focus,:vistied”状态，同时这些状态是可以组合使用而且保持着的

4.Elements面板，选中元素节点，在右则的样式版本中点击“+”号，就可以依元素的选择器生成对应的样式，生成优先级“ID选择器>类别选择器>标记选择器”

同是在上图中，我们也可以看到“鼠标”形状的按钮，就是在样式列表中显示当前元素对应的鼠标四个状态样式的，这个功能早期版本一直有的。

http://www.iunbug.com/archives/2012/10/09/455.html



∪∩BUG 2012-10-09 11:39 发表评论
]]>小测iOS6给前端带来的SMART APP BANNERShttp://www.blogjava.net/tidelgl/archive/2012/09/21/388278.html∪∩BUG∪∩BUGFri, 21 Sep 2012 09:17:00 GMThttp://www.blogjava.net/tidelgl/archive/2012/09/21/388278.htmlhttp://www.blogjava.net/tidelgl/comments/388278.htmlhttp://www.blogjava.net/tidelgl/archive/2012/09/21/388278.html#Feedback0http://www.blogjava.net/tidelgl/comments/commentRss/388278.htmlhttp://www.blogjava.net/tidelgl/services/trackbacks/388278.html升级了iOS6后测试了一下给应用推广来的新特性SMART APP BANNERS .首先要在head标签添加如下meta

1
<meta name="apple-itunes-app" content="app-id=425349261,app-argument=newsapp://doc/8BU4DQ9P00963VRO">

要注意的是content属性：app-id即是你的应用id,app-argument则用作打开应用时的URL，比如打开网易新闻对应的新闻VIEW。

测试结果是：

 

升级了iOS6的iOS设备，不过有点小BUG，比如new ipad中整条内容部分是居左而没居中显示，itouch4只有在对应的应用成功安装了才显示。希望这些BUG是个别机子，因为测试条件有限没有全面测试。

你想你会问，如果动态添加这条meta会是什么结果呢？先来看看：

http://www.iunbug.com/archives/2012/09/21/431.html



∪∩BUG 2012-09-21 17:17 发表评论
]]>运用webkit绘制渲染页面原因解决iscroll4闪动的问题http://www.blogjava.net/tidelgl/archive/2012/09/21/388239.html∪∩BUG∪∩BUGFri, 21 Sep 2012 04:24:00 GMThttp://www.blogjava.net/tidelgl/archive/2012/09/21/388239.htmlhttp://www.blogjava.net/tidelgl/comments/388239.htmlhttp://www.blogjava.net/tidelgl/archive/2012/09/21/388239.html#Feedback0http://www.blogjava.net/tidelgl/comments/commentRss/388239.htmlhttp://www.blogjava.net/tidelgl/services/trackbacks/388239.html

已经有不少前端同行抱怨iScroll4的各种问题，我个人并不赞同将这些问题归咎于iScroll4,因为iScroll4进无论是touch事件的捕获，还是使用transform来处理滚动，以及将cubic-bezier应用到transition上实现高效的平滑滚动，这些原理我们都是已知的。更多原理细节可以参看[译]手把手教你编写iOS上Mobile Web App实现Fixed Position和模拟滚动 一文。此文则来解释另一个被很多人误解为iScroll4 造成的问题，那就是内容多的页面闪动的问题。现象表现为：

1.滑动过程中，滚动区内的元素在释放手指时出现细微闪动

2.图片缩放过程中释放手指时明显闪动

3.iOS上从mobile safari打开或第三方应用内打开后，切回主屏幕再切回页面时明显闪动

4.页面初始时闪动

大致这些情况下会有闪动，在ipad2,new ipad上会明显看得出。

下面就来分析产生的原因和解决办法：

http://www.iunbug.com/archives/2012/09/19/411.html



∪∩BUG 2012-09-21 12:24 发表评论
]]>在mobile safari中巧妙实现检测应用安装就打开，否则进App Store下载http://www.blogjava.net/tidelgl/archive/2012/09/18/388006.html∪∩BUG∪∩BUGTue, 18 Sep 2012 09:49:00 GMThttp://www.blogjava.net/tidelgl/archive/2012/09/18/388006.htmlhttp://www.blogjava.net/tidelgl/comments/388006.htmlhttp://www.blogjava.net/tidelgl/archive/2012/09/18/388006.html#Feedback0http://www.blogjava.net/tidelgl/comments/commentRss/388006.htmlhttp://www.blogjava.net/tidelgl/services/trackbacks/388006.htmliOS6的Mobile Safari给前端开发者带来了什么  里已经提到iOS6的mobile safari将有智能应用通知标题（Smart App Banners）的功能，意在解决mobile safari里无法检测第三方应用安装状态的，通过这个功能，可以在页面中实现应用推荐类的需求。但目前来看，要实现这个需求只能在第三方应用中实现。思路也简单，第三方应用可以通过iOS的SDK提供的接口检测到对应的应用是否已经安装，然后在内嵌的UIWebView中打开的连接时追加参数如“?isinstalled=1”之类的参数供web页面获取来判断。web获知状态后可以提示给用户觖发的对应的应用的方案，如“打开应用”，“安装应用”等。

不过我们今天来说一种不借助第三方应用在mobile safari里就能实现跟上述类似的功能。

先来看看实现代码：

http://www.iunbug.com/archives/2012/09/18/401.html



∪∩BUG 2012-09-18 17:49 发表评论
]]>iScroll4启用snap时原生滚动被阻止的解决办法http://www.blogjava.net/tidelgl/archive/2012/09/18/388005.html∪∩BUG∪∩BUGTue, 18 Sep 2012 09:48:00 GMThttp://www.blogjava.net/tidelgl/archive/2012/09/18/388005.htmlhttp://www.blogjava.net/tidelgl/comments/388005.htmlhttp://www.blogjava.net/tidelgl/archive/2012/09/18/388005.html#Feedback0http://www.blogjava.net/tidelgl/comments/commentRss/388005.htmlhttp://www.blogjava.net/tidelgl/services/trackbacks/388005.htmlhttp://www.iunbug.com/archives/2012/09/18/398.html

iScroll4启用snap时原生滚动会被阻止，具体表现是拖动snap作用的元素往非snap路径时将无法拖动页面。

官方的解决办法是追加onBeforeScrollStart事件：

1
onBeforeScrollStart: function (e) { return true; }

这种办法在测试中iOS和原生android设备是没有问题的，但第三方定制系统的设备（如小米，魅族）以及将页面在android应用中打开都会造成滑动非常的卡的现象。这时只要改改iScoll4的源码即可。具体参看

http://www.iunbug.com/archives/2012/09/18/398.html



∪∩BUG 2012-09-18 17:48 发表评论
]]>Facebook最新的Mobile Web APP版新增的”摇一摇”功能所用到的DeviceMotionEvent事件http://www.blogjava.net/tidelgl/archive/2012/07/18/383431.html∪∩BUG∪∩BUGWed, 18 Jul 2012 10:56:00 GMThttp://www.blogjava.net/tidelgl/archive/2012/07/18/383431.htmlhttp://www.blogjava.net/tidelgl/comments/383431.htmlhttp://www.blogjava.net/tidelgl/archive/2012/07/18/383431.html#Feedback0http://www.blogjava.net/tidelgl/comments/commentRss/383431.htmlhttp://www.blogjava.net/tidelgl/services/trackbacks/383431.htmlFacebook在Mobile Web APP方面一直是担当榜样的大哥形像.近日出的新版在iOS上多了个“摇一摇”（Friendshake）寻找附近友邻功能。与这个功能相关的事件早在iOS4.2的时候就被mobile safari支持了,很早就听到做mobile游戏的朋友用上这个事件了,即是DeviceMotionEvent,下面我们就来讲讲这个事件:

DeviceMotionEvent 会在设备发生有意义的摆动(或运动)时产生.事件对象封装有产生的间距值,旋转率,和设备加速度.

加速度的计算方式是重力和用户产生的两个加速度矢量之和.设备是通过 陀螺仪和加速计来区别这两者的.

使用方法如下:http://www.iunbug.com/archives/2012/07/18/387.html 



∪∩BUG 2012-07-18 18:56 发表评论
]]>深入详解前端轻量级MVC框架新贵CanJS(1)http://www.blogjava.net/tidelgl/archive/2012/06/18/381000.html∪∩BUG∪∩BUGMon, 18 Jun 2012 04:09:00 GMThttp://www.blogjava.net/tidelgl/archive/2012/06/18/381000.htmlhttp://www.blogjava.net/tidelgl/comments/381000.htmlhttp://www.blogjava.net/tidelgl/archive/2012/06/18/381000.html#Feedback0http://www.blogjava.net/tidelgl/comments/commentRss/381000.htmlhttp://www.blogjava.net/tidelgl/services/trackbacks/381000.html阅读全文

http://www.iunbug.com/archives/2012/06/14/360.html

你可能听说了这个新MVC框架： CanJS。还有什么比用它来创建一个联系人Web App更能深入了解它的办法呢？当看完这三篇教程，你将全面了解用它的什么工具来创建你自己的Web App。

选择正确的库

创建一个JS APP没有好的工具是很有难度的，jQuery只是操作DOM的库，没有提供任何创建APP的基础，这就是为什么我们要一个类似CanJS的专门的库。

CanJS 是一个轻量级的MVC库，提供你创建一个JS APP所需的工具。

CanJS 是一个轻量级的MVC库，提供你创建一个JS APP所需的工具。 它提供有MVC (Model-View-Control) 模式的基本框架，模板动态绑定， route的支持且 内存安全。同时支持 jQuery, Zepto, Mootools, YUI, Dojo，有丰富的扩展和插件。

第一部分你将学到：

阅读全文

http://www.iunbug.com/archives/2012/06/14/360.html



∪∩BUG 2012-06-18 12:09 发表评论
]]>Google推出强大的网站速度分析和优化建议的Chrome开发者工具扩展插件：PageSpeed Insightshttp://www.blogjava.net/tidelgl/archive/2012/06/14/380770.html∪∩BUG∪∩BUGThu, 14 Jun 2012 03:44:00 GMThttp://www.blogjava.net/tidelgl/archive/2012/06/14/380770.htmlhttp://www.blogjava.net/tidelgl/comments/380770.htmlhttp://www.blogjava.net/tidelgl/archive/2012/06/14/380770.html#Feedback0http://www.blogjava.net/tidelgl/comments/commentRss/380770.htmlhttp://www.blogjava.net/tidelgl/services/trackbacks/380770.html

∪∩BUG 2012-06-14 11:44 发表评论
]]>iOS6的Mobile Safari给前端开发者带来了什么http://www.blogjava.net/tidelgl/archive/2012/06/12/380631.html∪∩BUG∪∩BUGTue, 12 Jun 2012 10:45:00 GMThttp://www.blogjava.net/tidelgl/archive/2012/06/12/380631.htmlhttp://www.blogjava.net/tidelgl/comments/380631.htmlhttp://www.blogjava.net/tidelgl/archive/2012/06/12/380631.html#Feedback0http://www.blogjava.net/tidelgl/comments/commentRss/380631.htmlhttp://www.blogjava.net/tidelgl/services/trackbacks/380631.html阅读全文http://www.iunbug.com/?p=339 

∪∩BUG 2012-06-12 18:45 发表评论
]]>[译]用YUIDoc文档化JavaScript代码http://www.blogjava.net/tidelgl/archive/2012/06/11/380497.html∪∩BUG∪∩BUGMon, 11 Jun 2012 07:05:00 GMThttp://www.blogjava.net/tidelgl/archive/2012/06/11/380497.htmlhttp://www.blogjava.net/tidelgl/comments/380497.htmlhttp://www.blogjava.net/tidelgl/archive/2012/06/11/380497.html#Feedback0http://www.blogjava.net/tidelgl/comments/commentRss/380497.htmlhttp://www.blogjava.net/tidelgl/services/trackbacks/380497.html

∪∩BUG 2012-06-11 15:05 发表评论
]]>