移动端开发技巧 —— active失效

发表于 2014-01-05 | 分类于 css

之前在移动端写相关的active样式，没有任何响应，后来发现stackoverflow, 有人也遇到一样的问题，解决方案如下：

最简单写法：
在body上附加属性ontouchstart=””

1
2
3

<body ontouchstart="">
    ...
</body>

当然你也可以在响应的需要体现active的地方附加属性ontouchstart=””

1	<a ontouchstart="">Click me</a>

iOS7在mac下web debug的失效的解决办法

发表于 2013-10-12 | 分类于 hibrid

在手机端调试的web页面的时候，经常会利用到iOS跟mac的safari来进行调试(该功能在iOS6发布的时候已经有了)。

但是前端时间iOS7正式版发布，这个功能就变得不那么好用了，html结构有的时候都展不开，css样式更是没有，真是麻烦。

还好apple搞了个WebKit nightly build，解决了这个问题。

针对高分辨率屏幕的样式优化

发表于 2013-07-22 | 分类于 css

之前在高分屏手机上开发单页的时候，图片变得模糊，得给retina的屏幕做2倍图片的适配

简单写法：

1
2
3

@media only screen and (min-device-pixel-ratio: 1.5), only screen and (min-resolution: 192dpi) {
 /* style rules */ 
}

兼容所有浏览器的话(当然不考虑IE9以下浏览器了)，还需要加上各浏览器的前缀：

1
2
3

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and ( min--moz-device-pixel-ratio: 1.5), only screen and ( -o-min-device-pixel-ratio: 3/2), only screen and ( min-device-pixel-ratio: 1.5), only screen and (min-resolution: 192dpi) {
 /* Style Rules */ 
}

PS:
这里需要注意的是background的写法：
background需要拆开写成：

1 2	background-image: url('xxx@2x.png'); background-size: 20px 30px;

background-size即是将高分屏适配的图片适配的size。

相关文章：
前端观察
 CSSgaga AutoRetina

移动端 meta

发表于 2013-05-07 | 分类于 html

总结下移动平台的meta标签的特殊作用

控制显示区域各种属性：

width - viewport的宽度
height – viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放

IOS中Safari允许全屏浏览：

<meta content="yes" name="apple-mobile-web-app-capable">

IOS中Safari顶端状态条样式：

<meta content="black" name="apple-mobile-web-app-status-bar-style">

content取值如： default/black/black-translucent

ps: translucent 半透明

apple官方给出的说明是：
If content is set to default, the status bar appears normal. If set to black, the status bar has a black background. If set to black-translucent, the status bar is black and translucent. If set to default or black, the web content is displayed below the status bar. If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar. The default value is default.

官方文档参考

###忽略将数字变为电话号码：

<meta content="telephone=no" name="format-detection">

一般情况下，IOS和Android系统都会默认某长度内的数字为电话号码，即使不加也是会默认显示为电话的，so，取消这个很有必要！

IOS中Safari设置保存到桌面图标：

这是IOS中Safari特有的meta，是在你保存某个页面到桌面的时候使用这张图作为桌面图标，so，尺寸和iphone上的一致，是57*57px.
第一种是所有添加圆角，如下：

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

第二种是有标准的苹果图标光泽，如下：

<link rel="apple-touch-icon" href="custom_icon.png">

可以根据不同的设备设定不同的图标

iPod Touch, iPhone and iPad

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

iPhone

<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

iPad

<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />

应用启动界面设置

<link rel="apple-touch-startup-image" href="img/splash.png" />

根据不同的设备设定不同的启动界面

iPad Landscape – 1024 x 748

<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />

iPad Portrait – 768 x 1004

<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />

iPhone/iPod Touch Portrait – 320 x 480 (standard resolution)

<link rel="apple-touch-startup-image" href="img/splash-screen-320x460.png" />

iPhone/iPod Touch Portrait – 640 x 960 pixels (high-resolution)

<link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />

官方文档参考

其他技巧

关闭Input键盘默认首字母大写：autocapitalize=”off”

CSS BFC(Block Formatting Context)

发表于 2013-05-06 | 分类于 css

最近这两天微博上关于前端面试这个话题又展开了讨论，BFC一词又冒出来了，写点东西纪念一下。

BFC的定义

是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

在创建了 Block Formatting Context 的元素中，其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。在 Block Formatting Context 中相邻的块级元素的垂直边距会折叠（collapse）。

在 Block Formatting Context 中，每一个元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边），即使存在浮动也是如此（尽管一个元素的内容区域会由于浮动而压缩），除非这个元素也创建了一个新的 Block Formatting Context 。

BFC到底是什么？

当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。

###怎样才能形成BFC

float的值不为none。
overflow的值不为visible。
display的值为table-cell, table-caption, inline-block中的* 任何一个。
position的值不为relative和static。

BFC的作用

参看这篇blog写的demo，很详细了已经：
demo

placeholder

发表于 2013-03-04 | 分类于 fe

基本上现在的web站点，如果涉及到表单之类的东东，一般都会用到placeholder。

但是IE之流的浏览器要用placeholder，就需要去模拟。

目前能想到的一般有两种思路，但都有些尴尬，或者说是弊端。

第一种是通过input的value变化来做。

这种优点是无需增加额外的结构，对于样式就无需做额外的控制。

但是它的缺点也很明显，就是提交相关的表单的时候，就得对表单上的所有input做一遍过滤，而且对于 type = password 的 input, 会被用星号代替我们想要的字符。

第二种就是通过增加一个label标签来实现，具体做法是外层有个块结构(如div)，里面是input跟label并列的结构，然后通过位置将label跟input显示在相关的位置(relative跟absolute就不多说了吧=。=)，然后监听输入域的内容变化来判断显示隐藏label。

第二种方式显然避免掉了第一种的两个缺点，这算优点吧。

第二种方法的缺点是增加了额外的结构，需要更加自身的需求进行额外的样式修改。

PS：第二种方法input背景设置透明的时候最好要用一张一像素的透明gif图片来repeat,不然input区域会被label遮挡掉，无法正常点击。

不知还有何种思路？？？

git remote 基本使用

发表于 2012-09-04 | 分类于 git

###添加远程仓库路径###

1	git remote add github git@github.com:spemoon/spemoon.github.com.git

实际上，pull 就是 fetch + merge

1	git pull github --all --tags

把工作目录迁移到github上面：

1 2	git remote add github git@github.com:spemoon/spemoon.github.com.git git push github --all --tags

显示所有的远程仓库

git remote -v
origin  git@github.com:spemoon/spemoon.github.com.git (fetch)
origin  git@github.com:spemoon/spemoon.github.com.git (push)
github  git@github.com:xxxx.git (fetch)
github  git@github.com:xxxx.git (push)

重命名远程仓库

git remote rename github gh
git remote
origin
gh

删除远程仓库

1
2
3

git remote rm github
git remote
origin

从远程仓库抓取数据，更新本地仓库：

git fetch origin
remote: Counting objects: 58, done.
remote: Compressing objects: 100% (41/41), done.
remote: Total 44 (delta 24), reused 1 (delta 0)
Unpacking objects: 100% (44/44), done.
From git@github.com:spemoon/spemoon.github.com.git
* [new branch]      product     -> origin/product

查看远程仓库信息，可用于跟踪别人的push：

git remote show origin
* remote origin
Fetch URL: git@github.com:spemoon/spemoon.github.com.git
Push  URL: git@github.com:spemoon/spemoon.github.com.git
HEAD branch: master
Remote branches:
..........

nodejs 运用 uglifyjs 模块做批量 js 压缩

发表于 2012-08-14 | 分类于 node.js

windows底下用uglifyjs批量压缩, 考虑到bat脚本实在不适合前端=。=，

用node写个批量压缩js的函数，方便、快速，分享之！

uglifyjs在这

var fs  = require('fs'); 
var jsp = require("./uglify-js").parser;
var pro = require("./uglify-js").uglify;

// 批量读取文件，压缩之
function buildOne(fileIn, fileOut) {
    if (fileIn.length > 0) {
        var finalCode = [];
        var origCode = '';
        var ast = '';
        for (var i = 0,len = fileIn.length; i < len; i++) {
            origCode = fs.readFileSync(fileIn[i], 'utf8');
            ast = jsp.parse(origCode); 
            ast = pro.ast_mangle(ast); 
            ast = pro.ast_squeeze(ast);

            finalCode.push(pro.gen_code(ast), ';');
        };
    }

    fs.writeFileSync(fileOut, finalCode.join(''), 'utf8');
}
//压缩首页js
buildOne(['../lib/slides.jquery.js', '../tpl/header_notice.tpl.js'], '../compile/home.min.js');

完整代码在这

windows 下的运行 uglifyjs

发表于 2012-05-28 | 分类于 node.js

现在node在windows底下安装的方式越来越简便了，只需要一个msi文件，参看node的官网。

装完后内置npm。

然后要安装的uglifyjs的话，只需打开cmd窗口。输入：

1	npm install uglify-js -g --prefix="C:\Program Files\nodejs"

当然上面这个路径是node的安装路径，可自行变更。

使用的话，只需敲命令：

1	uglifyjs animate.js > animate.min.js

这样既可。

当然，你也可以写脚本来批量处理。

vim指令小收集

发表于 2012-04-27 | 分类于 vim

1.改变当前窗口高度(增加n行的高度)

:res n

或者：

1	n ctrl w +

2.改变当前窗口宽度(增加n列的高度)

1	:vertical res n

或者：

1	n ctrl w >

PS:这尼玛这么麻烦，还不如用鼠标拖一下来得快=。不过如果木有鼠标的话另当别论了。。。

3.去掉^M

:%s/\r/

4.行首插入字符和行尾追加字符
在当前文件的所有行首插入字符”a”，可以用如下命令：

:%s/^/a

又如，在当前文件的所有行尾追加字符”b”，可用如下命令：

:%s/$/b

其中的^和$就分别是正则表达式中表示行首和行尾的表达式。

5.字符串替换

:s/vivian/sky/ 替换当前行第一个 vivian 为 sky
:s/vivian/sky/g 替换当前行所有 vivian 为 sky
:n,$s/vivian/sky/ 替换第 n 行开始到最后一行中每一行的第一个 vivian 为 sky
:n,$s/vivian/sky/g 替换第 n 行开始到最后一行中每一行所有 vivian 为 sky
n 为数字，若 n 为 .，表示从当前行开始到最后一行
:%s/vivian/sky/(等同于 :g/vivian/s//sky/) 替换每一行的第一个 vivian 为 sky
:%s/vivian/sky/g(等同于 :g/vivian/s//sky/g) 替换每一行中所有 vivian 为 sky
可以使用 # 作为分隔符，此时中间出现的 / 不会作为分隔符
:s#vivian/#sky/# 替换当前行第一个 vivian/ 为 sky/
:%s+/oradata/apras/+/user01/apras1+ (使用+ 来 替换 / )： /oradata/apras/替换成/user01/apras1/
* ************************************
1.:s/vivian/sky/ 替换当前行第一个 vivian 为 sky
:s/vivian/sky/g 替换当前行所有 vivian 为 sky
2. :n,$s/vivian/sky/ 替换第 n 行开始到最后一行中每一行的第一个 vivian 为 sky
:n,$s/vivian/sky/g 替换第 n 行开始到最后一行中每一行所有 vivian 为 sky
(n 为数字，若 n 为 .，表示从当前行开始到最后一行)
3. :%s/vivian/sky/(等同于 :g/vivian/s//sky/) 替换每一行的第一个 vivian 为 sky
:%s/vivian/sky/g(等同于 :g/vivian/s//sky/g) 替换每一行中所有 vivian 为 sky

SpeMoon

32 日志

59 分类

49 标签