企业号有一种消息类型叫保密消息，该类型消息有全屏水印、图片水印、禁止分享至朋友圈、禁止选中文字等功能。
但是对于图片，手机端默认长按时会触发下载保存交互。
首先想到的方案是通过JS实现，对touch实践做处理。
|
1 |
window.ontouchstart = function(e) { e.preventDefault(); }; |
但是这个对于长的文章，滚动事件就失效了。所以此方案无效，但是如果只是某个div有需求，可以这样处理。
其实这个可以通过CSS3的属性去除。
|
1 |
img { pointer-events: none; } |
如果只是对图片禁止选中，长按图片的时候不会有问题，但是如果是先选择旁边的文字，再覆盖选取图片，那图片照样会被copy出来。
禁止选中
|
1 2 3 |
-webkit-user-select: none;/*禁用手机浏览器的用户选择功能 */ -moz-user-select: none; |
这时候对文字禁止选中就没有问题了，整篇文章不可以复制或保存。截屏的时候会带有水印。
还有一招更甚，直接
|
1 |
*{ pointer-events: none; } |
完美实现以上需求，完成。
HTML5的canvas有很多应用点，如绘画板、图形绘制、游戏交互、彩票刮刮乐等，除了这些，还有个比较好的点就是主页涂抹一部分之后，页面消失进入主要内容。
wScratch是一个模拟刮刮卡的jQuery插件，可以设置刮开纯色或者图像。
显示刮卡百分比
到达一定百分比清空
移动端HTML5使用原生<video>标签播放视频，要做到两个基本原则，速度快和体验佳，先来分析一下这两个问题。
以一个8s短视频为例，wifi环境下提供的高清视频达到1000kbps，文件大小大约1MB；非wifi环境下提供的低码率视频是500kbps左右，文件大小大约500KB；参考QzoneTouch多普勒测速，2g网络的平均速度是14KB/s，那么下载一个低码率视频耗时35s；那么要想流畅播放视频，就需要一个加载等待的过程，这个过程要有明确的反馈，不能让用户有“坏掉了”的感觉。
| # | dns(s) | conn(s) | rtt(s) | tran(kb/s) |
|---|---|---|---|---|
| 2g | 3.85785 | 2.33482 | 2.57478 | 14.0374 |
| 3g | 1.60643 | 0.743109 | 0.608047 | 60.1967 |
| wifi | 0.986921 | 0.550208 | 0.444332 | 70.8728 |
视频是否可以自动播放，是否能循环播放，是否能显示下载进度，播放的时候如何隐藏控制条，暂停的时候又能显示出来呢。这些问题看上去貌似简单，但是由于PC/iOS/Android这些不同平台、不同的浏览器内核、甚至相同内核的不同版本，所实现的<video>属性、方法和事件差异较大，解决兼容性问题又给开发造成了很大困扰。 查看全文
响应式Web设计(Responsive Web design)的理念是： 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。
现在我们用的智能手机（iOS，Android）的浏览器都是基于webkit内核，由于webkit的浏览器对于html5的支持比较好，所以我们在声明头部的时候最好用html5的声明方式。标签中可以设置具体的宽度（如像素值）或者缩放比例如2.0（设备实际尺寸的两倍）。 查看全文
