用background-size鄙视长边压缩和短边压缩

前端狗们,有没有遇到过这样的场景:

页面上有一个固定大小的框框,要在这个框框里要放下一只大小未知生死也不能卜的图片,有时产品经理高傲地拿出iPhone指着照片APP里的图片列表撅着跟说对对对就素酱紫。

于是你写了一个relative的box,给box里的img来了一个position:absolute,接着,你要跑去跟你的开发同学讲解什么是短边压缩:

短边压缩:总是先把图片短的那一边设置成容器的对应边长度,再根据比例来压缩另一边,溢出的部分隐藏掉。

如果图片的宽高比(imgWidth/imgHeight)大于容器的宽高比(wrapWidth/wrapHeight)的时候,把图片的高度设置成容器的高度(imgHeight=wrapHeight),然后按这个比例计算出图片新的宽度(imgNewWidth= wrapHeight/imgHeight * imgWidth),并且再给图片来一个left= -(imgNewWidth-wrapWidth)/2

如果图片的宽高比(imgWidth/imgHeight)小于容器的宽高比(wrapWidth/wrapHeight)的时候,把图片的宽度设置成容器的宽度(imgWidth=wrapWidth),然后按这个比例计算出图片新的高度(imgNewHeight= wrapWidth/imgWidth * imgHeight),并且再给图片来一个top= -(imgNewHeight-wrapHeight)/2

说着说着,你们就晕了,我还不想往下写了呢。如果是个久经蹂躏的好开发,一下子就知道你在说什么,面对你个刚毕业的大学生哥们儿你就笑吧。更何况如果产品经理假装思索地托着下巴地说,不不不要居中显示两边留白的时候你要把桌子上的水杯拿走后再掀桌子吧。再去跟开发小弟弟请长边压缩的时候你不怕他会掉眼泪吗?

更何况业界(如果有这么个东西的话)对这种显示方法的描述千奇百怪,上面所谓的长边压缩和短边压缩也是我跟第一任开发自己的叫法,在这儿就不提某 hzlzh 同学的什么最优裁剪云云云。

但是,转机出现了!现在,我厂掌握了国际最先进的技术,凭借一流的水准解决了这个破坏产品和开发纯洁关系的难题,现在我要跪着把它讲出来。

使用background-image来显示图片,配合使用background-size来秒设图片到底是哪种显示方式:

background-size:contain;

图片在容器居中完全显示,两端留白:

QQ20140220-2

图片在容器居中显示,两端溢出隐藏:

background-size:cover;

QQ20140220-1

当然你可能还需要配合使用background-repeatbackground-position来设置图片不平铺以及显示的位置。

至今仍然忘不了小伙伴知道这个方法时候那幸福的表情以及眼角上晶莹的东西。

IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。

Posted in Uncategorized | Leave a comment

grunt前端开发插件grunt-sprite

这是什么

grunt-sprite 是一个 grunt 的前端开发插件。

能干什么

这是一个帮助前端开发工程师将css代码中的切片合并成雪碧图的工具,它的主要功能是:

  1. 使用二叉树排列算法,对css文件进行处理,收集切片序列,生成雪碧图
  2. 在原css代码中为切片添加background-position属性
  3. 生成用于高清设备的高清雪碧图,并在css文件末尾追加媒体查询代码
  4. 在引用雪碧图的位置打上时间戳
  5. 在样式末尾追加时间戳

安装依赖

grunt-sprite 使用 spritesmith 作为内部核心算法,根据官方文档中提到的基本依赖,须要安装Graphics Magick(gm)PhantomJS 两个依赖。

  • Graphics Magick(gm)

    GraphicsMagickgrunt-sprite 提供用于图像处理的框架,安装方法:

  • PhantomJS

    PhantomJSspritesmith 提供 CSS选择器 与 JSON 的支持,安装方法:

配置说明

// 自动雪碧图
  sprite: {
      allslice: {
          files: [
              {
                  //启用动态扩展
                  expand: true,
                  // css文件源的文件夹
                  cwd: 'css',
                  // 匹配规则
                  src: ['*.css'],
                  //导出css和sprite的路径地址
                  dest: 'tmp/',
                  // 导出的css名
                  ext: '.sprite.css'
              }
          ],
          options: {
              // 默认使用GM图像处理引擎
              'engine': 'gm',
              // 默认使用二叉树最优排列算法
              'algorithm': 'binary-tree',
              // 默认给雪碧图追加时间戳
              'imagestamp':true,
              // 默认给样式文件追加时间戳
              'cssstamp':true

          }
      }
  }
  • files

    使用标准的动态文件对象

    dest 指定一个输出的目录,将会在这个目录下创建一个css/和一个sprite/目录。

  • options

    • engine

      必选项,指定图像处理引擎,选择gm

    • algorithm

      必选项,指定排列方式,有top-down (从上至下), left-right(从左至右), diagonal(从左上至右下), alt-diagonal (从左下至右上)和 binary-tree(二叉树排列) 五种供选择。

    • imagestamp

      可选项,是否要给雪碧图追加时间戳

    • cssstamp

      可选项,是否给样式文件追加时间戳

载入插件

请不要忘了载入插件

grunt.loadNpmTasks('grunt-sprite'); 

打个比方

有一个类似这样的目录结构:

    ├── test                
        ├── css/    
            └── icon.css        
        ├── slice/  
                ├── icon-a.png
                ├── icon-a@2x.png       
                ├── icon-b.png
                └── icon-b@2x.png
        └── publish
            ├── css/
                └── icon.sprite.css
            └── sprite/     
                └── icon.png

css/icon.css 调用slice/目录下的切片,grunt-sprite 会将 css/icon.css 处理。

publish/ 目录下生成 css/sprite/ 两个目录,css/ 目录下是处理完成的样式 icon.sprite.css ,而 sprite/ 目录下是合并完成的雪碧图 icon.png

特别注意

  1. css文件置于css/文件夹中,切片文件置于slice/文件夹中,且 css/slice/ 处于同级。
  2. css/slice/ 目录不一定要处于项目根目录
  3. 理论上所有的切片都应该是.png格式,png8 png24png32不限
  4. 理论上高清切片都应该是源切片尺寸的2倍,所以所有高清切片的尺寸宽和高都必须是偶数
  5. 生成后的雪碧图将以源css文件名来命名

源码

grunt-sprite的前身是grunt-hellosprite,为了方便好记,已全部迁移到grunt-sprite

如果你对本项目感兴趣,可以在github上查看项目

致谢

感谢 damao 把grunt带到我面前,让我如此惊喜,当然领导要写在前面。

感谢 Todd Wolfson 耐心的解答,说多了都是泪,当然反正你也看不懂这段话。

感谢 自力 偏执地坚持MacOS和撕心裂肺地嚷着要在Macbook上自动雪碧图。

感谢 CssGaga 的作者 ytzong 带来的cssgaga模式。

Posted in Uncategorized | 2 Comments

IOS Webapp的桌面图标及更新

IOS允许网站开发者像NativeaApp一样在IOS设备的主屏幕为其网站添加一个启动Icon,这个代表着网站的Icon在苹果官方开发者文档里被称为“Web Clip”,它的作用类似于桌面浏览器的书签,用户通过点击Icon能直接快速打开这个url的网站。

为了给某个网页或者整个网站指定一个漂亮的桌面启动图标,IOS Safari提供了两个私有接口: apple-touch-iconapple-touch-icon-precomposed

Apple-touch-icon

设置方法

通过在页面HTML的头部添加 <link> 标签

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed-iphone.png" />

这两个标签都是用来指定桌面图标的,但两者有个细微的区别,

  • 通过 apple-touch-icon 添加的图标是会带IOS图标统一的高光效果
  • 通过 apple-touch-icon-precomposed 添加的图标则是设计原图,不带高光渐变效果的。

图片大小

为了给不同的IOS设备指定其启动图标,在IOS Human Interface Guide中提到,推荐以下四种尺寸:

IOS设备 最适尺寸(px)
iPhone 和 iTouch 57 x 57
retina iPhone 和 retina iTouch 114 x 114
iPad 72 x 72
retina iPad 144 x 144

相应地,要指定不同分辨率的设备的图标,可以添加相应的 <link> 标签序列,官方建议的顺序是这样的

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" />

通过 <link><sizes> 属性可以特别地声明这个图标是为哪种分辨率设备准备的,如果没有指明 <sizes> 属性的大小,则默认值为57×57。

如果所有的 <link> 标签序列中都没有符合官方推荐的最适尺寸的话,那么IOS会从所有比推荐的最适尺寸大的图标中选择尺寸最小的那一个,如果所有的 <link> 标签序列中的图标都比当前推荐的最适尺寸小的话,IOS会从这些图片中自动选择最大的那个来作为启动图标。

特别地,如果整个页面都没有指定任何的 apple-touch-icon 的图标的话,IOS则会自动去网站根目录寻找有 apple-touch-iconapple-touch-icon-precomposed 前缀的图标文件。

图片格式

用于设置成为桌面启动图标的图片文件,可以是以下三种类别

  • 纯静态的图片

    图片的路径可以绝对路径、相对于当前页面的相对路径以及相对于网站根目录的路径。

    目前发现不仅支持png格式的,jpg和gif也在支持的列表中,如:

     http://tmt.io/tick/img/demo.png
    

    但如果是动态gif图片只会截取一帧(第一帧?)来显示

  • 包含图片文件头的HTTP REQUEST

    可以不是一个静态的文件,而是由服务器返回的带有图片文件比如 image/png 文件头的请求。就像我们常用的图片占位图工具 http://getimg.in 的图片:

     http://getimg.in/144x144tcat
    

    这个的优点是可以根据前端需要动态地返回不同的图片,缺点是,每次新的图片都需要请求服务器,从服务器下载

  • base64格式的图片

    这是一个包含png文件头的长字符串,它可以是一张从静态图片转换的,也可以是从服务器返回的,还可以是canvas生成的

    <img src=”"

     data:image/png;base64,(xxxxxx)
    

更新桌面启动图标

不完全动态的桌面图标

首先需要声明的是,webapp不能像nativeapp一样后台推送,在没打开前是不运行的,而webapp里所有的js逻辑都只有在页面打开状态下才能运行,所以动态修改桌面启动图标的方法只有在每次点开后才能生效。

基于此,动态桌面图标的使用并不适合比如天气、新闻、twitter等即时性很高、后台主动推送的场景,仅仅适用于用户每次手动打开后便更新内容,更新完之后的icon能作为一个状态的标识供用户参考,比如任务管理工具、记帐软件等。

选择canvas作为动态图片来源

使用base64的优点是,可以选择由canvas来动态生成,并且不需要有网络请求,直接在本地完成。

而且我们的场景非常特殊:仅IOS的Safari,所以完全可以不用考虑浏览器的支持度。

var canvas = document.createElement('canvas');
canvas.width = 144;
canvas.height = 144;
var context = canvas.getContext("2d");
var baseImg = canvas.toDataURL();    

通过js动态创建和修改指定桌面图标的 <link> 标签

桌面图标在页面里的声明仅仅存在 <link> 中,理论上我们只要动态修改 <link> 标签的图片地址就能实现动态的图标。

首次从safari里将页面添加主屏幕时,IOS会检查页面里的 <link> 标签,读取图片的地址然后生成启动图标。并且这个标签只要在用户执行这步操作之前就有的,即不管是页面模板里静态本来存在的,还是通过js动态创建的,该方法一样生效。

http://tmt.io/tick/test/ClickAddLink.html

我们期望的场景是,用户在webapp里进行了一项操作,这个操作更新了整个webapp的状态,我们希望这个状态的改变能在桌面的启动图标里体现出来。

拿task工具来举例,用户在点开之前,桌面图标上显现任务队列里还有3个任务,当添加了一个新的任务之后,桌面图标上的任务数字应该变成4。当所有的任务都被打勾完成之后,桌面图标也应该反馈这样的状态,比如显示0条任务或者其它鼓励类的图标。

所以理论上,我们要做的就是在每次操作之后,通过js在一个canvas中绘出新的图案,再将这个canvas转化成base64的图片,动态创建到一个 <link> 标签添加至head就行了。

但事实上并不是这样。

webapp的桌面图标渲染

当在webapp里创建了一个 <link> 再退出后,发现桌面的启动图标并没有像我们期望的那样被更新。

经过死乞白赖的测试后发现,在webapp里进行添加和修改的 <link> 标签并不能被IOS读取和渲染到,虽然 <link> 标签在页面里的确存在着,但并不会被更新到桌面。因为webapp里的图标是在body.onload的时候被渲染的

是的,尽管这样听上去很不科学,但是他还是发生了。下面的两个demo的功能都把webapp打开的次数画进canvas,然后生成到桌面图标里,只不过第一个demo的添加方法是在 body.onload 时触发,第二个是在用户点击操作时才触发。

  • body.onload 自动触发

    http://tmt.io/tick/test/BodyLoadSetIcon.html

    本页面将在每次body.onload事件后读出打开的次数,生成下面的图片,并把这个图片添加至head。

    先添加页面至主屏幕,在webapp模式下打开再退出检查桌面启动图标。

    图标上的数字标识出页面被打开的次数,在每次打开再退出后图标上的数字将加1。

  • 通过点击操作添加link

    http://tmt.io/tick/test/ClickSetIcon.html

    本页面在载入的时页面头部并没有link标签,通过点击操作读出打开的次数,生成下面的图片,并把这个图片添加至head。

    先添加页面至主屏幕,在webapp模式下打开再退出检查桌面启动图标。

    在每次打开再退出后图标上的数字始终没有被修改。

既然已知图标是在 body.onload 时被渲染的,那么我们需要在每次操作之后都要进行一次reload操作,并且在body.onload的时候再生成图片添加 <link> 标签。为了保证在每次页面重载的时候状态不丢失,需要把状态保存起来,考虑到webapp特殊的使用场景和环境,使用LocalStorage就非常方便。

最终的逻辑

所以,更新桌面图标的方法都应该绑定在 body.onload 上,整个流程看上去应该这个样子的:

  1. 页面载入(包括从桌面打开页面时),读取LocalStorage,根据LocalStorage转换成状态,通过canvas生成体现状态的图片并转换成base64格式,创建 <link> 添加到 <head>
  2. 在打开的页面里进行操作,把操作完的状态在到LocalStorage中,然后通过 location.reload() 重新载入一次页面,执行第一步。

基本上所有与更新Icon的关键逻辑都在 body.onload 时执行完毕,其它的中间态都只是对状态的更新。

Tick-Task

这里有一个简单的DEMO,以webapp形式实现的任务工具。主要演示了上面提到的更新桌面启动图标的逻辑。

http://tmt.io/tick/

第一次添加到主屏幕时显示的是从Safari里默认的初始图片(这里是一个灯泡),当更新了任务列表之后,桌面上的启动图标将会显示任务列表里未完成的任务,除此之外:

  • 当在safari中打开时,根据 navigation.standalone 判断当前网页是否以webapp运行。如果不是则显示添加到主屏幕的提示。
  • 添加任务或者完成任务会将条目内容存到LocalStorage,并且刷新页面,根据所剩未完成条目数生成图片添加到link。
  • 使用Manifest保存全部静态资源,保证每次页面重载时的体验,并且在离线状态下仍然可用。
  • 使用开源的页面摇晃检测js库 – shake.js,完成条目后摇晃手机可以清除已完成任务,并播放声音。

你还可以在github上查看详细的代码,并且如果愿意的话提出改进。

Try and enjoy it.

最后

webapp因为权限的原因,尚不能做到:

  • webapp不能像nativeapp一样后台push,在没打开前是不运行的,而webapp里所有的js逻辑都只有在页面处理打开状态下才能运行,所以动态修改桌面启动图标的方法只有在每次点开后才能生效。
  • 目前尚未找到像更改桌面图标一样动态地更改标题的方法
  • 未找到给webapp添加气泡的方法

但是,Apple在IOS设备的主屏幕上为webapp开了一扇窗户,我们也许可以通过这扇窗为用户带来特别的体验。

Posted in Uncategorized | 1 Comment

Chrome,你在颤抖什么

这是一个陈年老bug,出现的场景是这样的

  1. Chrome19或者以后某些版本 和 IE9
  2. 页面里至少有一个二逼的大Flash 或者复杂的Canvas画布
  3. 页面中有某一个fixed定位的元素A的父容器B使用了relative定位
  4. 拼了老命地滚动滚轮

当B元素滚出页面可视范围的时候,A元素会以不可预计的方式地出现在页面上。

看上去的效果像是reflow引起的位置错乱,但通过调试器对AB元素进行追加样式和Class都不能复原,这点儿不同于ie6下的reflow错乱。

通过调试器干掉flash或者canvas,A元素就乖乖地回到正常的位置,分析有可能是因为页面中的flash或者canvas对浏览器造成太大的开销,在滚动的时候,浏览器对relative元素内fixed元素位置的计算出了错。

所以解决的点要么是减小这种大开销的flash或者canvas,要么就去掉这种relative嵌套fixed的定位方式。

解决办法:

  1. 去掉B元素的relative定位。
    这样并不会影响到以body来定位的fixed元素A。给B元素添加relative目的是,把在ie6下不支持fixed的元素A相对于B进行absolute定位。但现在看实际上ie6下并不会出现这个滚动错乱bug,所以只用把relative属性hack给ie6即可。
  2. 将fixed元素移至原定位元素以外。
    目的也是一样的,避免使用这种定位的嵌套。

最后,感谢小妖精写的这首歌,下面是张悬版的“你在烦恼什么

没有不会谢的花
没有不会退的浪
没有不会暗的光
你在颤抖什么啊

Posted in CSS3 | Tagged , , | 1 Comment

反正闲着也是闲着


你肯定不信,阳光能透过窗户洒在床上。


白菜在ipad上玩Touchgrind。


去香港收的本土鞋,有没有很骚很文艺。


豆瓣上匡威的活动中奖得的鞋子,白菜穿上很赞。


那个红色的机器上叫掌上水中套圈游戏机,还有那个绿色的照相机你肯定也玩儿过。

Posted in isee | Tagged , | 5 Comments

先森,看你的内裤上的线头

某天起从杭州吹来一阵欢神的风,大家都时髦地穿上三角内裤了!
原理挺简单:利用宽高都为0的容器的边框来模拟上下左右的三角,将显现的那一边边框的样式设为solid而其它不需要显现的颜色设为透明(IE6下则利用dotted和dashed来隐藏)。

width:0;
height:0;
line-height:0;
font-size:0;
border-width:50px;
border-style:solid;
border-color:green;
border-left-color:transparent;
border-right-color:transparent;
border-top-color:transparent;

这段代码就能实现一个简单的向上的等腰直角三角箭头,当然可以根据调整border的宽度来实现不同方向不同张角的小三角,甚至还可以通过两个三角的叠加实现更华丽的效果。

但是,某天有女童鞋反应有人的失态了!毛线头从三角内裤边露出来了!咱们可是经济实用守法规范的欢神仔,这种情况当然要杜绝。经过研究发现这种不雅线头只会在某些版本的firefox下出现,出现条件还没确定,但是解决方法很简单,将不显现的边的边框样式设置为outset

border-style:outset outset solid;

修整了三角内裤的线头后,又过了若干天某三角内裤仔浆抱罗斯在寂寞难耐的光棍儿节发现了各浏览器竟然也有跟他一样的惯用手的问题!经过专业的检查和会诊,详细的报告如下:

有女朋友陪伴的FF大哥从来不伤手的,IE9哥定力十足。谷哥一不小心就暴露了自己常年惯用左手的秘密,导致右箭头会比左箭头大一号。IE678下面小不解释,下箭头会比上箭头大一号。

Posted in Uncategorized | Tagged , , , | 1 Comment

IE ARGB背景半透明滤镜溢出隐藏bug

OOXX君认为找到了兼容所有浏览器背景半透明的完美解决方案:

标准浏览器下使用RGBA,而在IE系列下使用特有的渐变滤镜将起始和终点的颜色值设为一样来模拟。

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#77303030,endColorstr=#77303030)\9;

据估这个消耗会比 imageloader滤镜要小很多,比如渲染等待和内存消耗等等。在全站推广使用之前我们做了些常规测试发现IE678下都表现良好,没有出现imageloader滤镜里a标签不可点等bug。

某天ooxx君郁闷地发现使用了渐变滤镜的容器即使没有设置溢出隐藏方式在IE6/7下绝对定位溢出的元素仍旧会被隐藏,看上去就像是渐变滤镜默认地使用了overflow:hidden;

正常浏览器下黄色的绝对定位块儿会从使用了渐变滤镜的窗口里挂出去:

但是在IE6/7下会被隐藏:

解决方法也很简单,(在IE6/7的这种情形下)使用滤镜层的子元素作为定位层,并且去掉滤镜层本身的定位属性,这样即使外层使用了overflow:hidden,绝对元素的溢出隐藏取决于定位层的溢出隐藏方式而不会hidden,详情见康瑞大哥容易被误解的overflow:hidden .

Posted in Uncategorized | Tagged , , , | 9 Comments

隐藏元素的子元素隐藏无效

将某元素隐藏后,对其原本显示的子元素进行display:none操作,当再把这个元素显示出来的时候,在ie678的兼容模式下会发现子元素的隐藏无效.
感谢ooxx君给找的这个DEMO页,要重现bug请使用欢乐的IE系列浏览器打开.
博主用了一个很有爱的兔子向大家展示这个神奇的魔术:

1,把容器和兔子的position都设为relative或者absolute

2,把容器的display设为none;

3,把兔子的display设为none;

4,再把容器的display设为block

(你看,IE总是会给你惊喜的对不)

在IE678的兼容模式下你仍然会看到这只兔子,尽管是你亲手给他设置的display:none,当然你也许会觉得这是什么障眼术,然后你肯定会坚持打开调试器然后手动给这个兔子重新写上display:none,但是它依旧坚挺!啊哈,这就是魔术对不.

这个bug出现的条件是:

1, IE678的兼容模式下,IE8的默认模式, Firefox3, Opera9, Safari3 on Windows, Safari 3 on Mac, Chrome都不会重现.

2,容器和子元素(上面的那只兔子代表的元素)的定位都必须不是satatic的,只能是relative,或者absolute.

3,顺序必须是先把容器隐藏,再把子元素隐藏,如果顺序不对,这个魔术就会搞砸.

4,这个bug只会发生在隐藏后的元素中,并且这是在页面完全载入后.

解决的办法

1,临时性地把子元素的 display 由 none 设为 block 然后再设回 none

2,临时性地把子元素的 position 由 relative 设为 absolute 然后再设回 relative (反之一样.)

3,临时性地子元素的 visibility 设为 hidden 然后再设回去(但是这个只发生在子元素的position为absolute的时候)

今天跟OOXX君讨论的结果是可以在将容器隐藏前就先对其子元素隐藏,这种方法或许实现起来看上去更正常一些.

The Wonderful World Of IE!

Posted in Uncategorized | Tagged , , , | 3 Comments

IE7图片拉伸平滑

img { -ms-interpolation-mode: bicubic; }

msInterpolationMode was introduced in Windows Internet Explorer 7.

The msInterpolationMode property applies to stretched images only. For example, if the natural width of the image is 200×200 but the page designer specifies that the height and width should be 400×400, then the image will be stretched to the new dimensions using the nearest-neighbor algorithm, unless otherwise specified.

If the zoom level of the page is 100%, the default interpolation is nearest-neighbor, otherwise bicubic mode is used.

ie7引进的一个ie私有属性,用来优化图片在被拉伸时的平滑处理(压缩不管的,囧死了)。

ivane:
ie7版本可以通过-ms-interpolation-mode。IE8貌似默认开启。Fx3.6+可以通过image-rendering 来减少图片缩放导致失真,webkit貌似是-webkit-interpolation-mode支持~

Posted in Uncategorized | Tagged , , | Leave a comment

Instapaper

Instapaper是一个用来将当前来不及细读的网页和博文保存起来以后再细读的应用(痛恨中文的不利索,一个“read it later”搞了这么长)。

Instapaper到底是咋回事儿哩?
1,当你有一些东西很想好好看一下但这会儿又没时间,点那个“Read Later”.
2,等你坐在班车或公交上听着无聊的男科医院的广告的时候,不妨拿出你的iPhone5(如果你有的话)或者Kindle读你先前存档的那些有意思的文章。
3,当然你还可以在你的电脑上浏览,你的iPad,iPhone和iTouch或者其它的手持设备上都有相应的应用。(愣是没明白这儿的Paper是啥意思)

很受鄙视地没找到Android,不过别着急,都会有的,先搞个账号开始玩玩儿!

你可以更改或者导出这些数据,并且如果你觉得不爽了可以随时删除你的账号。

超级喜欢这种注册界面,一个email地址,一个密码,什么密码确认什么验证码都他妈的玩蛋去。

注册成功之后会提示把”Read Later”这个按钮直接拖到书签栏里,然后等到有你想“read later”的文章出现的时候就点下这个按钮,这篇文章就会自动添加到你在 instapaper的”reading list”里。

接着在自己的Instapaper账号就边的Unread列表里就会出现刚刚添加的文章。

在这个列表下你可以再次阅读你所收藏的文章,并且对这些文章进行归档。

看了果果同学在Kindle上的演示,顿时眼红脖子粗,想拿PSP2000一台交换并补差价未遂。。。接着,咱是穷人,玩儿不起iPhone5和kindle,搞了个android的手机还是1.5的。去电子市场上搜了一下instapaper ,我那个去,还真有:

感谢Instapaper开放的API和一群牛逼的开发者,让我们android的用户能挺胸抬头了····

那个叫 instafetch的应用挺强大的,推荐可以下来用用,但是前提是升级到PRO版,不过好像不太贵,这个软件0.99$,想想还是挺值的,不过可惜没有信用卡,就下了那个iPaper的应用。

iPaper是Instapaper的一个客户端应用,它能让你通过手机阅读你在Instapaper上保存的文章。在使用之前你需要一个Instapaper的账号。

有谁能帮我搞个app的ICON不???!!!(这个开发者泪奔了。)

看上去iPaper 的功能真的少极了,不过还好能满足基本的离线阅读和分享功能,回头自己研究下也写个应用去~

不过话说回来,Kindle是个非常好的东西,绝对明确的用途和非常简洁实用的功能,让阅读充满了惊喜但又不影响一个人的习惯,从这些点来看kindle很值得拥有。(泪奔了,谁要PSP速速联系~)

Posted in Uncategorized | Tagged , , | 2 Comments