kaosini的专栏

PhoneGap是一种介于WebApp和NativeApp之间的解决方案，它为每种移动客户端提供一个Native的壳，这种壳里边包着一个Web应用。借助于壳，Web应用可以被安装，可以被发布到各大市场。同样的，借助于壳和设备之间的通信，壳内的Web应用可以轻松调用设备硬件。虽然目前想用PhoneGap开发商业应用还有很多的坑要填，但其跨平台和低学习成本的特性决定了未来它在移动互联网领域必有一席之地

我们知道mobile设备上监测转屏的事件是orientationchange，但这个事件支持得不太好,有些android就不支持orientation事件zepto.js中扩展了一个 $.support 来检测是否支持orientation View Code 本文通过Javascript的window.matchMedia方法 和 css media quer

近期开发的一个项目中需要开发如下一个功能: 需要检测一个iframe中的src是否可用如果不可用则将该iframe隐藏. 我采用的方法是通过ajax去检测,如果不可用才将该iframe隐藏,代码如下:   var isExistPage = true; var pageUrl = document.getElementById('frame1').src; //页面地址 var X

官网提供的安装方式一样http://phonegap.com/install/，老版本的貌似不需要这么安装。先装nodejs，http://nodejs.org/，下载安装，执行命令：npm install -g phonegap有报错，提示没有安装git下载msysgit，安装，并设置系统环境变量，把git安装目录的*\bin目录添加到PATH中。如有提示缺少libi

前段时间同事在做WAP页面，发现页面设置了meta viewport中的大众属性，即：view plaincopy但发现页面依旧不根据手机屏幕进行自动缩放，后来找其他同事帮忙解决了，我看了源代码发现了是在原来的viewport中增加了target-densitydpi属性。看之初不太了解，也因为当时自己手上有其他需求在处理，最近突然想起了这件事，准备对它做一些了解，以备不时之需。

一、碎碎念~前言我们都用过jQuery的CSS()方法，其底层运作就应用了getComputedStyle以及getPropertyValue方法。对于那些只想混口饭吃的人来讲，晓得CSS()如何使用就足够了。对于希望在JS道路上越走越远的来人说，简单了解一些JS库底层实现对自己的学习很有帮助。可能谈不上信手拈来的使用，至少对创造一些创意新颖的新技术拓宽了思路。jQuery

文分为两个部分，第一部分讨论跨平台网站的可行性，第二部分讨论viewport是如何设置的开发跨平台网站？靠标签的自适应宽高实现多尺寸通用！？标签宽高可以自适应没错，我们很早就可以这么做了。但是你会发现很多pc端的传统网站还是会把宽度固定。（淘宝采用1000px宽度，搜狐950px...）为什么我们不让网站自适应宽高呢？那是因为，如果我们听任标签宽度被浏览器任意拉伸，将导致极

前阵子在w3ctech的走进名企 - 百度前端 FEX 专场上曾“夸下海口”说听完讲座后七天就可以打造自己的前端性能监控系统，既然说出去了也不能食言。从前一篇文章前端数据之美相信大家对前端数据有了一定的了解，下面就针对其中的性能数据及其监控进行详细阐述。开始行动本文中的性能主要指 web 页面加载性能，对性能还不了解？不用担心，接下来的“每一天”跟我一起进入前端性能的世界。

关于离线缓存与局部更新版本迭代快的，不适合用离线缓存，由于用户不会主动去清理浏览器的缓存局部更新的模块可以使用iframe，但是iframe不支持orientation的media query，需用宽度辨别关于转屏在某些低版本的android不支持orientationchange事件，可以用resize替代，resize会多次触发，orientationchange在高版

转载地址：http://blog.youkuaiyun.com/whqet/article/details/26394493

在手机端经常游走的我们很多时候都会对横屏和竖屏的概念比较熟悉，大家都经常头疼怎么才能判断这横屏和竖屏的状态呢，今儿梦龙就为大家分享分享。　　用CSS判断横屏竖屏问题。CSS代码如下[plain] view plaincopyprint? 1、   @media (orientation: portrait)

iScroll 的诞生是因为手机 Webkit 浏览器（iPhone、iPod、Android 和 Pre）本身没有为固定宽度和高度的元素提供滚动内容的方法。这导致了很多网页使用 position:absolute 无法固定页头页尾，并对内容进行滚动的方式。而 iScroll 就是为了解决这个问题。iscroll使用注意事项：1, .scroll不要在css里设置高度,不然拖不动2

Fiddler是一个http调试代理，它能 够记录所有的你电脑和互联网之间的http通讯，Fiddler 可以也可以让你检查所有的http通讯，设置断点，以及Fiddle 所有的“进出”的数据（指cookie,html,js,css等文件，这些都可以让你胡乱修改的意思）。 Fiddler 要比其他的网络调试器要更加简单，因为它仅仅暴露http通讯还有提供一个用户友好的格式。 对于A

1、自己写一个fn-->myclick，然后onclick="myclick();"调用。代码：JavaScript code?123456789101112131415var t1 = null;//这个设置为

web移动平台前端UI开发工作，兼容问题超多，今儿又遇到一个。产品方要求在某固定尺寸容器内显示内容，但内容条数未知；如果条数过多，容器显示滚动条。这鸟需求按说是So easy，容器设死宽、高，CSS加属性overflow:scroll;完事！可拿设备去测的时候有趣了，Pc all browser正常，ios正常 ，android失效。泥马在android下效果与 overflow:hidden

最近随着 Apple iOS 和 Android 平台的盛行，一个新的名词 WebApp 也逐渐火了起来，这里我也趁着热潮做一个关于 WebApp 系列的学习笔记，分享平时的一些研究以及项目中的经验，在现阶段研究对象暂时限定为 iOS 平台(iPhone/iPad/iPod touch)，随后会扩展到 Android 平台。对于 WebApp，我的理解是：它一个基于 Web 形式的应用程序

Zepto.js是一个jQuery的迷你版本，只支持现代浏览器，包含了jQuery中大部分的API，这也是一个适合在移动端使用的基础类库。(function(undefined) { if (String.prototype.trim === undefined) // fix for iOS 3.2 String.prototype.trim = function() {

[摘要]： 不少人做了Android的APP应用且放在了外网上，但是手机用户通过url找到了apk文件却无法实现下载，也或者下载后无法自动安装。针对这样一些问题今天进行了一个技术性的汇总，希望可以帮到那些为此问题烦恼的Android开发者。 写了一些 android 的应用放在网站上让人下载，在某些机型上，三星的 android 的 4.0 以上多款机型最普遍, 用安卓自带浏览器下载程序，会提示

项目中需要使用iframe嵌套另外一个项目的子页面,但是要求不能有滚动条,也就是说iframe的高度得根据嵌套页面的高度自适应 由于跨域,所以父子页面显然是不能通信的 第一个想到的是最近才接触到的window.name方式 代码片段: [javascript] view plaincopy

什么是跨域1、document.domain+iframe的设置2、动态创建script3、利用iframe和location.hash4、window.name实现的跨域数据传输5、使用HTML5 postMessage6、利用flash本文来自网络（http://f2e.me/200904/cross-scripting/，该网址已不能访问），仅作个人读书笔记之用，并稍作修改和

Android 2.x和IOS5以下都不支持overflow:auto属性（position:fixed也不支持）。移动端浏览器兼容性和PC端相比，有过之而无不及。操作系统版本及各式浏览器和各式的屏幕大小排列组合，你永远也无法预测到你的应用会在哪部手机上冒出什么样的问题。测试过各种浏览器（chrome手机浏览器、百度手机浏览器、手机QQ浏览器、UC浏览器、UC浏览器HD、safari浏

最近工作很忙，好久没有更新博客内容了。前些日子跳槽到一家新单位就接到了一个很难的工作项目。在这个项目中技术核心点是动画效率问题。经过了近半个月的攻关各种难题总算是搞定了。同时，对移动端浏览器对动画的解析能力有了一个更高的认知。在这里想和大家分享一下。有不足之处欢迎指正！做移动前端的盆友应该都知道，动画特效方面，尤其兼容安卓系统，就和互联网端兼容IE6一样麻烦。好多效果不错的创意都因为不兼容

Media Queries直译过来就是“媒体查询”，在我们平时的Web页面中head部分常看到这样的一段代码： link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> link href="css/style.css" rel="stylesheet" type="text/css" med

什么是图片惰性加载呢？顾名思义，惰性指的是我们只将用户视野范围内（浏览器窗口的可视区域）的图片加载，而用户视野范围外的图片先不加载，当用户看到这些图片时再做加载。这样做的好处在于哪里呢？1、用户访问速度上升了，浏览器的加载进度条很快就加载完毕。2、节省用户流量。那么如何实现呢？我们需要解决两个问题：① 如何知道用户是否能看见这张图片？

感觉就好无语啊，我才学习了几个属性，才发现$.browser、toggle()、live()都不见了，jquery1.9为了性能也删掉了这么多东西。2.0的就完全不支持IE6、IE7、IE8了。我都不敢去看2.0的了。这是国人敢用的jquery版本吗？概述jQuery 1.9删除或修改了几个过去行为不一致或效率低下的几个API。他们在以前的jQuery版本中已经标注过过时(depr

今天来公司的主要目的就是研究虚拟键盘与fixed的问题，期间因为同事问起闭包与事件委托（阻止冒泡）相关问题，便穿插了一篇别的：【小贴士】工作中的”闭包“与事件委托的”阻止冒泡“，有兴趣的朋友可以去看看，因为首页只能放一篇，这个就略去了现在回到主要研究点，首先在移动端我们点击文本框后会出现一个虚拟键盘， 虚拟键盘让页面可视区域得到了充分利用，但是也带来了一些问题问题源头

本帖最后由 陈升想Nero 于 2012-7-16 22:31 编辑作者：吕定平 David Lv用Cocos2d-html5开发游戏完成之后,下一步就是将文件打包然后发布了. 下面将会一步一步的讲解如何进行打包.在进行打包操作前,我们必须要搭建好环境,如标题所示,我们是使用Ant进行打包的. Ant是什么?大家可以去google一下.要将ant首先需要安装jre ,就是J

最近为了提升web app在ios上的点击效率，使用了FastClick.js，效果很明显，基本是点击后立马有反馈。可是发现一个问题，在使用模拟点击的时候，并不能触发点击的目的。$("#btn").trigger("click");//模拟点击而以上代码，在安卓上，却能正常触发。于是百度查找了相关的资料,找到以下内容（引用自http://amazeui.org/1.x/ja

已经移动端用zepto做的页面，突然发现on绑定的click事件并没有触发，写法如下，是事件委托的写法。1111111aaaaaaasssssaaaaaaassssssssssssss$(document).on('click','.abc',function(argument) {alert($(this).html())})我把此写法改成非事件委托的

MT是手机腾讯网前端团队开发维护的一个专注于移动端的js模块管理框架。为什么使用MT无更新不下载简单友好的模块定义规范简单易用的打包管理工具强大的js增量更新代理服务快速上手(可查看demo目录下代码)安装mtbuildgithub, npm?1$ n

大家都知道ios5上的浏览器（包括safari）是无法上传附件的。这个是因为苹果公司并没有支持 input file 这个控件 ，在这个版本上。但是在ios6.0版本上就已经支持了input file 控件。但是对 ios5用户如果想通过safari上传图片（比如想访问facebook，twitter网页版），怎么办呢。我推荐几种方法：方法一：如果是未越狱版本：直接

前言       随着2012年苹果发布第一款Retina Macbook Pro（以下简称RMBP），Retina屏幕开始进入笔记本行业。两年过去了，RMBP的市场占有率越来越高，且获得了一大批设计师朋友的青睐，网站对于Retina屏幕的适配也变成了迫在眉睫的问题。       如果大家对于Retina适配的重要性不是特别清楚，请看我的两个截图：上图是Google

javascript中的setAttribute()浏览器的兼容性问题1.element要用getElementById or ByTagName来得到，2.setAttribute("class", vName)中class是指改变"class"这个属性，所以要带引号。3.IE中要把class改成className,.....IE不认class,所以最好写两句，都用上吧。

转载地址：http://www.iteye.com/news/27580

开篇：如果说Notepad++是一款不错Code神器，那么Sublime Text应当称得上是神器滴哥。Sublime Text最大的优点就是跨平台，Mac和Windows均可完美使用；其次是强大的插件支持，几乎无所不能。开始使用Sublime Text：Sublime Text有Dev版本，推荐使用，下载地址，一般推荐下载便携版本（Portable version），这样

by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=739一、哗啦哗啦的简介zxx://这里“哗啦哗啦”的作用是为了渲染一种氛围。content属性早在CSS2.1的时候就被引入了，可以使用:before以及:after伪元素生成内容。此特性目前已被大

字符十进制转义字符"""&&&<<>>>不断开空格(non-breaking space)  HTML特殊转义字符对照表字符十进制转义字符字符十进制转义字符

一直以来，本人都认为css3的animation只能实现渐变动画，比如高度从0渐变到100px这类的。而无法实现高度从0跳变到50px再跳变到100px这种类似flash的帧动画效果。但是在看到天才的师姐给的例子之后， 让我愧疚得无地自容，原来还真有css3帧动画的，T_T。这个属性是 timing-function: step-end; 而且firefox、webkit、ie10都有支持

Animate.css是由Dan Eden的Daniel Eden使用CSS3的animation制作的动画效果的CSS集合。换句话说：Animate.css就是一大堆的很酷，很有趣，而且很炫又能跨浏览器的动画效果样式集锦，你可以直接使用到您的项目中。要在你的项目中使用，简单的很，就是三步完成：HTML Markup div id="test">testdiv>

转载地址：http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html评论同样精彩