同时设置 border-radius & background & border-color & background-clip 在 Android 4.1.1 上有 bug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

position: absolute;
top: 50%;
left: 50%;
margin-top: -37px;
margin-left: -37px;
width: 66px;
height: 66px;
// border: 4px solid rgba(255, 255, 255, 0.5);
border: 4px solid #f00;
background: #fafafa;
border-radius: 50%;
-webkit-background-clip: content-box;
background-clip: content-box;
text-align: center;
line-height: 1;
z-index: 1;

设置 border 不是透明色，表现的和预期一样：

如果设置为透明色，就会这样：

Refer

• the-backgound-clip-property-and-use-cases

End.

背景

在优化图片的时候，有一个分享功能，点击会弹出分享浮层，里面有各类社交 logo 如 QQ，微信，微博等，这些 logo 图片都是各自加载的，现在希望能做一张精灵图减少 HTTP 请求，样式如下图：

遇到的问题就是怎么能自适应的设置图片大小以及位置

问题描述

给 iscroll 的子元素绑定 click 事件，在 猎豹，chrome, UC 等失效

原因

后来查阅 文档 发现已经提示我们了

options.click
为了重写原生滚动条，iScroll 禁止了一些默认的浏览器行为，比如鼠标的点击。如果你想你的应用程序响应 click 事件，那么该设置次属性为 true 。请注意，建议使用自定义的 tap 事件来代替它（见下面）。
默认属性：false

options.tap
设置此属性为 true，当滚动区域被点击或者触摸但并没有滚动时，可以让 iScroll 抛出一个自定义的tap事件。
这是处理与可以点击元素之间的用户交互的建议方式。侦听 tap 事件和侦听标准事件的方式一致。示例如下：

1 2	element.addEventListener('tap', doSomething, false); \\ Native $('#element').on('tap', doSomething); \\ jQuery

你可以通过传递一个字符串来自定义事件名称。比如：
tap: ‘myCustomTapEvent’
在这个示例里你应该侦听名为myCustomTapEvent的事件。
默认值：false

什么是选择符

选择符决定它和文档树中的哪个元素相匹配，其实是模式匹配，这样它所定义的样式就能应用到那个元素上。

怎么写

选择符可以简单到只有一个元素名，如 p {}，也可以复杂到很多选择符组合在一起，如 .header .title {}。那它是怎么定义的呢？CSS3 中定义：

• 选择符是一组或多组简单选择符通过连接符组合起来的
• 一组简单选择符就是多个简单选择符不是用连接符组合起来的
• 简单选择符就是最最基本的选择符，包含 通用选择符(*)、类型选择符(p, div...)、类(.header...)、伪类(:first-child...)、ID(#footer…)、属性选择符([attr]...)
• 连接符包含 space, +, > , ~

通常我们常用的手势事件有 touchstart, touchmove, touchend，对 touchcancel 用之甚少，仅知道就是由于系统原因导致的手势中断而触发的事件。

在一个项目中我就用到了这个事件 touchcancel，有这么个需求：需要监听长按下载这个动作（浏览器默认支持长按下载，同时会弹出一个系统弹框）

很自然我们就想到了监听 touchstart/touchend，在 touchstart 记录起始点/时间，在 touchend 记录终止点/时间，满足长按要求则触发事件；

给一个元素绑定 touchstart, touchmove, touchend, click

如果只是触摸一下这个元素，按理是只触发 touchstart touchend click，如果滚动的话，应该就是多了一个 touchmove 而已

但是安卓机的某些浏览器（如 UC）在滚动的时候不会触发 touchend（偶尔也会触发），touchmove 可能也只是触发一次，见 demo

解决方法：

• 在 touchstart 设置 e.preventDefault()，页面不能滚动，链接不能跳转，不会触发 click 事件
• 在 touchmove 设置 e.preventDefault()，页面不能滚动以及不能 pinch-room

参考 Touch_events - MDN

Since calling preventDefault() on a touchstart or the first touchmove event of a series prevents the corresponding mouse events from firing, it’s common to call preventDefault() ontouchmove rather than touchstart. That way, mouse events can still fire and things like links will continue to work.

参考 Preventing the touch default

The default of all actions is prevented when you return false (or call preventDefault()) ontouchstart. The touchmove event is trickier: only scroll and pinch-zoom are prevented when you return false on that event.

Refer

• 如何修复移动浏览器上 touchend 事件不触发的bug

End.

1、平台检测

安卓

1

var android = ua.match(/(Android)\s([\d.]+)/);

IOS

1
2
3
4

var ios = ua.match(/iPhone|iPad|iPod/);
var ipad = ua.match(/(iPad).*OS\s([\d_]+)/);
var ipod = ua.match(/(iPod).*OS\s([\d_]+)/);
var iphone = !ipad && ua.match(/(iPhone)\sOS\s([\d_]+)/);

问题

在一个带有 展开/收起 的列表里，使用了委托处理点击 查看更多 的逻辑，如下图：

代码如下：

1
2
3

$(document).on('click', '.footer', function (e) {
    
});

这段代码在 iphone 上点开不了，安卓都是 OK 的。可以点一下 测试DEMO 体验一下

写了个简单的 rss reader 扩展，用来订阅一些博客了解最新的技术进展。

1、实现的功能

• 支持添加订阅、导入已有的 OPML，导出 OPML，可以分享到微博、印象笔记、（微信todo）
• 可以配置每页文章数量，几天更新一次
• 使用客户端存储 localStorage
• 每次切换到新的 rss feed，都会先判断本地存储是否存在且是否过期，过期会重新更新
• 导入 OPML 不会立刻请求所有文章更新，而添加单个 feed 会立刻请求文章存储在本地

2、实现效果

项目中遇到了页面的字体在 UC 变大的问题，后来排查是一个地方的 font-size: 12px 导致的，临时方案就是换了字体大小解决了问题

后来其他同事又遇到了这个问题，这不得不重视起来，于是在 知乎 上找到了答案

uc浏览器判断到页面上文字居多时，会自动放大字体优化移动用户体验

解决方法是在头部加上

1

<meta name="wap-font-scale" content="no">

尝试了其他方法也是可以的，如改变字体大小，把样式表放在最后加载等

End.