debug–在线代码调试工具

工具地址:http://debug.cnodejs.net
这个工具主要是为群里面同学们的提问发代码用的,webapp开发可以方便js调试。
主要功能点

  • 分享代码,仅支持html,javascript,css;
  • 代码高亮
  • 生成可运行的html文件
  • 支持手机访问运行页面,生成二维码文件地址;
  • 支持手机访问的console信息打印在pc的控制台,需要添加一段js,并且调用wa.log()

项目地址:https://github.com/xiaoqiang/debug

web app/mobile web开发入门

欢迎加入webapp前端开发QQ群:115187143

基础知识篇—–摘自:webkit webApp 开发技术要点总结

1. viewport:
也就是可视区域。对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域,这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport;
实际上我们可以操作的属性有4 个:

width -             //  viewport 的宽度 (范围从200 到10,000,默认为980 像素)
height -            //  viewport 的高度 (范围从223 到10,000)
initial-scale -     //  初始的缩放比例 (范围从>0 到10)
minimum-scale -     //  允许用户缩放到的最小比例
maximum-scale -     //  允许用户缩放到的最大比例
user-scalable -     //  用户是否可以手动缩 (no,yes)

那么到底这些设置如何让Safari 知道?其实很简单,就一个meta,形如:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">   //编码
<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/>
<meta name="apple-mobile-web-app-capable" content="yes" />  // 离线应用的另一个技巧
<meta name="apple-mobile-web-app-status-bar-style" content="black" />  // 隐藏状态栏
<meta content="black" name="apple-mobile-web-app-status-bar-style" /> //指定的iphone中safari顶端的状态条的样式
<meta content="telephone=no" name="format-detection" />       //告诉设备忽略将页面中的数字识别为电话号码
<meta name="Author" contect="Mr.He"/ >

在设置了initial-scale=1 之后,我们终于可以以1:1 的比例进行页面设计了。关于viewport,还有一个很重要的概念是:iphone 的safari 浏览器完全没有滚动条,而且不是简单的“隐藏滚动条”,是根本没有这个功能。iphone 的safari 浏览器实际上从一开始就完整显示了这个网页,然后用viewport 查看其中的一部分。当你用手指拖动时,其实拖的不是页面,而是viewport。浏览器行为的改变不止是滚动条,交互事件也跟普通桌面不一样。(请参考:指尖的下JS 系列文章)
更多内容

QRcode二维码在线识别解码chrome插件

二维码 (2-dimensional bar code) 是用某种特定的几何图形按一定规律在平面(二维方向上)分布的黑白相间的图形记录数据符号信息的;在代码编制上巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念,使用若干个与二进制相对应的几何形体来表示文字数值信息,通过图象输入设备或光电扫描设备自动识读以实现信息自动处理: 二维条码/二维码能够在横向和纵向两个方位同时表达信息,因此能在很小的面积内表达大量的信息。

例如本站的logo就是一个二维码见顶部http://www.xiaoqiang.org

IE下图片数量较少可以在地址栏输入以下js代码:

javascript: (function(Q, R, D, e, c, o, d, E, P, I, C) {
    if (Q.getElementById(c)) return;
    C = Q[R + 'NS'] &amp;&amp; Q.documentElement.namespaceURI;
    C = C ? Q[R + 'NS'](C, 'script') : Q[R]('script');
    C[D]('id', c);
    C[D]('src', P + d + I);
    C[D](c, o); (Q[e]('head')[0] || Q[e]('body')[0]).appendChild(C);
    C = new % 20Image;
    C[D]('src', P + E);
})(document, 'createElement', 'setAttribute', 'getElementsByTagName', 'QRdecode', '4', 'decode.js', 'fav.ico', 'http://204.12.225.114/', '#startOpened');

或者右击 二维码解码 添加到收藏夹,需要解码的页面直接点一下这个链接就行了。

但是这种方式在图片太多的页面会出问题,建议将需要解码的图片在新窗口/新选项卡打开,然后点击解码。

推荐安装chrome解码插件,在线安装

使用方法很简单,使用chrome浏览器再二维码图片上右击,选择“二维码解码”选项就可以看到解码后的信息了。

有任何问题都可以留言反馈给我,我会尽快改进的^_^
更多内容

webapp水平垂直滚动demo

先放个访问地址(请使用android/水果系列移动设备访问):http://xiaoqiang.org/demo/webapp

用爪机可以直接扫这个二维码webapp
demo介绍

  • 横向滚动,置顶固定菜单;
  • 纵向滚动,支持滚动条;
  • 横屏竖屏宽度自适应;
  • 载入自动隐藏地址栏;
  • 锁定viewport;
  • 滚动条在用户触屏的时候才显示,非触屏状态隐藏;
  • 锁定滚动方向,横向的时候不能竖向;(感谢qbaty协助优化体验)。

测试机器

  • android2.3(本人自测);
  • itouch4(本人自测);
  • ipad(dustin测试);
  • 帮忙测试的哥们可以在我的博客留言反馈结果

暂时发现的问题

  • ipad/itouch有渲染问题,第一次拖动有闪屏现象

其他基于webkit的浏览器也能看到大概的效果

更多内容

css2.1权重(specificity)IE6/7下一些错误规则

关于CSS specificity
CSS 的specificity (权重),它是衡量一个衡量CSS值优先级的一个标准,既然作为标准,就具有一套相关的判定规定及计算方式,specificity用一个四位的数字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。

在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。
选择符Specificity值列表:

Selectors
选择符
Syntax Samples
语法
ensample
示例
Specificity
特性
通配选择符(Universal Selector) * *{ width:560px;} 0,0,0,0
类型选择符(Type Selectors) E1 td { font-size:12px;} 0,0,0,1
伪元素选择符(pseudo-element Selectors) :first-line :first-line{ font-size:12px;} 0,0,0,1
伪类选择符(Pseudo-classes Selectors) :link :link { font-size:12px;} 0,0,1,0
属性选择符(Attribute Selectors) [attr] [title] {color:blue;} 0,0,1,0
ID选择符(ID Selectors) #ID #test{ font-size:12px;} 0,1,0,0
类选择符(Class Selectors) E1.className .test{color:blue;} 0,0,1,0
子对象选择符(Child Selectors) E1 > E2 body > p {color:blue;} E1+E2
相邻选择符(Adjacent Sibling Selectors) E1 + E2 div + p {color:blue;} E1+E2
选择符分组(Grouping) E1,E2,E3 .td1,a,body {color:blue;} E1+E2+E3
包含选择符(Descendant Selectors) E1 E2 table td {color:blue;} E1+E2

更多内容