移动web开发之viewport

移动设备的屏幕比较小,它的viewport就是能用来渲染网页的可视矩形窗口(不包括地址栏以及底部操作栏)。

现代的移动设备浏览器基本上都能处理桌面网页,但是很显然移动屏幕那么小,要显示桌面网页,肯定需要经过一些特殊处理:

Certain classes of browser attempt to display desktop pages on a small screen
by automatically zooming the display. This can be problematic for applications
that have already been optimized for a small screen. The viewport meta tag
tells the device at what scale to render the page.

注:引自http://www.w3.org/TR/mwabp/#bp-viewport

一个典型的viewport meta tag设置如下:

1
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

把上面代码插到页面head标签内,告诉移动浏览器按照设备的100%宽度去渲染页面:

阅读全文

谈一谈web storage

web storage就是我们常说的本地存储,在这里我不多说web
storage,想深入了解可以自己到以下网址看:

这里想说的是,怎么实现一个跨浏览器的localStorage。先看看哪些浏览器支持localStorage

http://caniuse.com/namevalue-storage

caniuse上面的统计很详细,我们只关注pc端浏览器的支持情况:

  • ie 8.0+
  • firefox 3.5+
  • chrome 4.0+

咦,稍等!caniuse上面统计的firefox 2.0、3.0部分支持localStorage是神马意思?请看以下 引文

localStorage is also the same as globalStorage[location.hostname], with the
exception of being scoped to an HTML5 origin (scheme + hostname + non-standard
port) and localStorage being an instance of Storage as opposed to
globalStorage[location.hostname] being an instance of StorageObsolete which is
covered below.

原来是firefox初期版本的非标准实现globalStorage,但是:

阅读全文

关于button自动submit问题

最近在做一个项目的过程中,有个同事提出了“button在回车的时候会自动submit”的问题,然后还建议我们以后别用button,难道button真不能用么?

我在w3c上查了,找到了button的相关定义( 传送门 ):

Buttons created with the BUTTON element function just like buttons created
with the INPUT element, but they offer richer rendering possibilities: the
BUTTON element may have content. For example, a BUTTON element that contains
an image functions like and may resemble an INPUT element whose type is set to
“image”, but the BUTTON element type allows content.

可见,button是用来扩展input的,并不是不能用,相反,在有按钮需求的时候,应该多使用button

那是什么原因导致button会在回车的时候自动提交呢?回想一下,表单在什么情况下回车会自动提交呢?
请看一下这些 案例 (如果有更多的案例,欢迎补充)

好,现在回到开头的问题,先看看我那同事的需求是怎样的?

页面有个输入框和一个查询按钮(表单的一部分,表单还有其他域),用户在输入框输入查询文本后,回车或者点击查询按钮,触发ajax搜索功能,但是不能提交整个表单。

那同事是怎么做的呢?html代码大概类似如下:

1
2
3
4
<form action="" method="post">
<!-- 表单中还有其他元素 -->
<input type="text" /><button>查询</button>
</form>

阅读全文

mac删除pkg

mac osx上大多数应用程序都是通过.DMG或者.pkg来安装的(当然brew方式安装的除外)。

如果是通过DMG方式安装的软件,要删除它就挺简单,直接从osx的应用程序文件夹上删除即可。

那么pkg方式安装的软件又该怎么删除呢?

mac并没有提供什么快捷删除方式,我们只能找到pkg安装后产生的文件,然后删除它。

方式一

mac会维护一份pkg安装历史,只要找到那个文件夹,我们就可以对症下药了。

我的机子是osx 10.8.4,pkg历史安装列表在/private/var/db/receipts目录下:

1
2
cd /private/var/db/receipts
ls -l

列出该目录,可以看到类似如下内容:

1
-rw-r--r--    1 root  wheel     47315  6 15 15:48 com.codeius.izip.bom
-rw-r--r--    1 root  wheel       253  6 15 15:48 com.codeius.izip.plist

找到.bom文件后,我们就可以使用以下命令找到安装的文件列表:

1
lsbom -pf com.codeius.izip.bom

执行上述命令后,输出了类似以下内容:

阅读全文

git删除版本库中的文件

已经添加到版本库的某个文件,应该怎么删除呢?

  • 使用git删除命令
1
git rm <file>

运行该命令后,git会提示:

1
rm '<file>'

再执行 svn status,可以看到文件已从暂存区删除,并等待 commit

  • 手动删除文件
1
rm <file>

然后再从git暂存区中把该文件删除即可:

1
git reset HEAD <file>

或者可以使用以下方式从暂存区删除文件:

1
git add -u

bower启用tab completion支持

bower是twitter开发的一个web前端包管理器,使用它可以很方便的管理前端资源,比如我现在需要jquery,按照以前的做法,是上jquery官网去下载,但是现在可以用一行命令就搞定。

1
bower install jquery

这样就可以很简单地拿到所需要的jquery文件。

bower提供的功能很多,支持searchinitlink等,具体详解bower官网。

安装bower的时候,并不支持tab
completion,那怎么办?在命令行上直接执行bower看看:

1
Usage:

    bower <command> [<args>] [<options>]

Commands:

    cache-clean    Clean the Bower cache, or the specified package caches
    completion     Tab Completion for Bower
    help           Display help information about Bower
    info           Version info and description of a particular package
    init           Interactively create a bower.json file
    install        Install a package locally
    link           Symlink a package folder
    list, ls       List all installed packages
    lookup         Look up a package URL by name
    register       Register a package
    search         Search for a package by name
    uninstall      Remove a package
    update         Update a package

Options:

    --no-color - Do not print colors (available in all commands)
   --quiet    - Suppress all output except for warnings and errors (available in all commands)
    --silent   - Suppress all output (available in all commands)

See 'bower help <command>' for more information on a specific command.

看到其中的completion顿时来了精神,再在命令行下执行:

1
bower completion

看一下输出的内容:

1
###-begin-bower-completion-###
#
# Installation: bower completion >> ~/.bashrc  (or ~/.zshrc)
# Or, maybe: bower completion > /usr/local/etc/bash_completion.d/bower
#

哈哈,走到这里,都应该知道怎么添加tab completion支持了吧!!!

_注意:在mac osx上应该添加到~/.bash_profile文件中。_

function declarations within blocks

在google javascript style guide上有这么一条规则: function declarations within
blocks
.

google建议不要这么写:

1
2
3
if(x) {
function foo() {}
}

为什么呢?这涉及到function declarationsfunction expressions的问题。

什么是function declarations

ecma-262function declarations的定义如下:

1
function Identifier ( FormalParameterListopt ) { FunctionBody }

function declarations具备以下几个特征:

  • Identifier必不可少

  • Function declarations cannot be nested within non-function blocks, such as if.

  • Function Declarations must begin with function

  • The function name is visible within it’s scope and the scope of it’s parent.

代码示例如下:

1
2
3
4
function bar() {
return 3;
}
bar(); // 3

阅读全文