-###判断是否为iPhone：
+### 判断是否为iPhone：
// 判断是否为 iPhone ：
function isAppleMobile() {
return (navigator.platform.indexOf('iPhone') != -1);
};
-###localStorage:
+### localStorage:
var v = localStorage.getItem('n') ? localStorage.getItem('n') : ""; // 如果名称是 n 的数据存在 ，则将其读出 ，赋予变量 v 。
localStorage.setItem('n', v); // 写入名称为 n、值为 v 的数据
localStorage.removeItem('n'); // 删除名称为 n 的数据
-###使用特殊链接：
+### 使用特殊链接：
如果你关闭自动识别后 ，又希望某些电话号码能够链接到 iPhone 的拨号功能 ，那么可以通过这样来声明电话链接 ,
打电话给我
@@ -832,29 +832,29 @@ ios的safari提供一种“隐私模式”，如果你的webapp考虑兼容这
|
-###自动大写与自动修正
+### 自动大写与自动修正
要关闭这两项功能，可以通过autocapitalize 与autocorrect 这两个选项：
-###不让 Android 识别邮箱
+### 不让 Android 识别邮箱
-###禁止 iOS 弹出各种操作窗口
+### 禁止 iOS 弹出各种操作窗口
-webkit-touch-callout:none
-###禁止用户选中文字
+### 禁止用户选中文字
-webkit-user-select:none
-###动画效果中，使用 translate 比使用定位性能高
+### 动画效果中，使用 translate 比使用定位性能高
[Why Moving Elements With Translate() Is Better Than Pos:abs Top/left](http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/)
-###拿到滚动条
+### 拿到滚动条
window.scrollY
window.scrollX
@@ -875,20 +875,20 @@ ios的safari提供一种“隐私模式”，如果你的webapp考虑兼容这
把代码放在setTimeout中，会发现程序变快.
-###关于 iOS 系统中，Web APP 启动图片在不同设备上的适应性设置
+### 关于 iOS 系统中，Web APP 启动图片在不同设备上的适应性设置
-
+
-###position:sticky与position:fixed布局
+### position:sticky与position:fixed布局
-###关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格
+### 关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格
可以通过正则去掉
this.value = this.value.replace(/\u2006/g, '');
-###关于android webview中，input元素输入时出现的怪异情况
+### 关于android webview中，input元素输入时出现的怪异情况
见下图
@@ -915,23 +915,23 @@ Android Web 视图,至少在 HTC EVO 和三星的 Galaxy Nexus 中，文本输
依旧无法解决（摩托罗拉ME863手机），则使用input:text类型而非password类型，并设置其设置 -webkit-text-security: disc; 隐藏输入密码从而解决。
-###JS动态生成的select下拉菜单在Android2.x版本的默认浏览器里不起作用
+### JS动态生成的select下拉菜单在Android2.x版本的默认浏览器里不起作用
解决方法删除了overflow-x:hidden; 然后在JS生成下来菜单之后focus聚焦，这两步操作之后解决了问题。(来自岛都-小Qi)
参考
-###Andriod 上去掉语音输入按钮
+### Andriod 上去掉语音输入按钮
input::-webkit-input-speech-button {display: none}
-##IE10 的特殊鼠标事件
+## IE10 的特殊鼠标事件
[IE10 事件监听](http://www.mansonchor.com/blog/blog_detail_73.html "article5")
-##iOS 输入框最佳实践
+## iOS 输入框最佳实践
[Mobile-friendly input of a digits + spaces string (a credit card number)](http://stackoverflow.com/questions/11219242/mobile-friendly-input-of-a-digits-spaces-string-a-credit-card-number)
@@ -944,7 +944,7 @@ Android Web 视图,至少在 HTC EVO 和三星的 Galaxy Nexus 中，文本输
[HTML5 inputs and attribute support](http://www.miketaylr.com/code/input-type-attr.html)
-##往返缓存问题
+## 往返缓存问题
点击浏览器的回退，有时候不会自动执行js，特别是在mobilesafari中。这与**往返缓存(bfcache)**有关系。有很多hack的处理方法，可以参考
@@ -953,14 +953,14 @@ Android Web 视图,至少在 HTC EVO 和三星的 Galaxy Nexus 中，文本输
-##不暂停的计时器（safari的进程冻结）
+## 不暂停的计时器（safari的进程冻结）
或者可以用postmessage方式:
主页面:
// 解决ios safari tab在后台会遭遇进程冻结问题
- // http://www.apple.com/safari/#gallery-icloud-tabs
+ // http://www.apple.com/safari/# gallery-icloud-tabs
// Safari takes advantage of power-saving technologies such as App Nap, which puts background Safari tabs into a low-power state until you start using them again. In addition, Safari Power Saver conserves battery life by intelligently pausing web videos and other plug‑in content when they’re not front and center on the web pages you visit. All told, Safari on OS X Mavericks lets you browse up to an hour longer than with Chrome or Firefox.1
var work;
function startWorker() {
@@ -988,7 +988,7 @@ worker:
// 解决ios safari tab在后台会遭遇进程冻结问题
- // http://www.apple.com/safari/#gallery-icloud-tabs
+ // http://www.apple.com/safari/# gallery-icloud-tabs
// Safari takes advantage of power-saving technologies such as App Nap, which puts background Safari tabs into a low-power state until you start using them again. In addition, Safari Power Saver conserves battery life by intelligently pausing web videos and other plug‑in content when they’re not front and center on the web pages you visit. All told, Safari on OS X Mavericks lets you browse up to an hour longer than with Chrome or Firefox.1
importScripts('/socket.io/socket.io.js');
@@ -1002,14 +1002,14 @@ worker:
count = count++;
postMessage({targetURL:data.url,count:count});
});
-##Web移动端Fixed布局的解决方案
+## Web移动端Fixed布局的解决方案
-##ios上background-attachment:fixed不能正常工作
+## ios上background-attachment:fixed不能正常工作
参考 http://stackoverflow.com/questions/20443574/fixed-background-image-with-ios7
-##如何让音频跟视频在ios跟android上自动播放
+## 如何让音频跟视频在ios跟android上自动播放
@@ -1043,21 +1043,21 @@ worker:
-##iOS 6 跟 iPhone 5 的那些事
+## iOS 6 跟 iPhone 5 的那些事
-###IP5 的媒体查询
+### IP5 的媒体查询
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {
/* iPhone 5 or iPod Touch 5th generation */
}
-###使用媒体查询，提供不同的启动图片：
+### 使用媒体查询，提供不同的启动图片：
-###拍照上传
+### 拍照上传
@@ -1065,13 +1065,13 @@ worker:
不支持其他类型的文件 ，如音频，Pages文档或PDF文件。 也没有getUserMedia摄像头的实时流媒体支持。
-###可以使用的 HTML5 高级 api
+### 可以使用的 HTML5 高级 api
* multipart POST 表单提交上传
* XMLHttpRequest 2 AJAX 上传（甚至进度支持）
* 文件 API ，在 iOS 6 允许 JavaScript 直接读取的字节数和客户端操作文件。
-###智能应用程序横幅
+### 智能应用程序横幅
有了智能应用程序横幅，当网站上有一个相关联的本机应用程序时，Safari浏览器可以显示一个横幅。 如果用户没有安装这个应用程序将显示“安装”按钮，或已经安装的显示“查看”按钮可打开它。
@@ -1123,9 +1123,9 @@ Canvas更新 ：createImageData有一个参数，现在有两个新的功能做
更新SVG处理器和事件构造函数
-##IOS7的大更新
+## IOS7的大更新
-[iOS 7 的 Safari 和 HTML5：问题，变化和新 API](http://jinlong.github.io/blog/2013/09/23/safari-ios7-html5-problems-apis-review/#jtss-tsina)(张金龙翻译)
+[iOS 7 的 Safari 和 HTML5：问题，变化和新 API](http://jinlong.github.io/blog/2013/09/23/safari-ios7-html5-problems-apis-review/# jtss-tsina)(张金龙翻译)
[iOS 7 的一些坑(英文)](http://www.sencha.com/blog/the-html5-scorecard-the-good-the-bad-and-the-ugly-in-ios7 "ios7的一些bug")
@@ -1133,15 +1133,15 @@ Canvas更新 ：createImageData有一个参数，现在有两个新的功能做
-##webview相关
+## webview相关
-#Cache开启和设置
+# Cache开启和设置
browser.getSettings().setAppCacheEnabled(true);
browser.getSettings().setAppCachePath("/data/data/[com.packagename]/cache");
browser.getSettings().setAppCacheMaxSize(5*1024*1024); // 5MB
-#LocalStorage相关设置
+# LocalStorage相关设置
browser.getSettings().setDatabaseEnabled(true);
browser.getSettings().setDomStorageEnabled(true);
@@ -1156,11 +1156,11 @@ Canvas更新 ：createImageData有一个参数，现在有两个新的功能做
}
}
-#浏览器自带缩放按钮取消显示
+# 浏览器自带缩放按钮取消显示
browser.getSettings().setBuiltInZoomControls(false);
-#几个比较好的实践
+# 几个比较好的实践
使用localstorage缓存html
@@ -1170,14 +1170,14 @@ Canvas更新 ：createImageData有一个参数，现在有两个新的功能做
主要原因就在于Android Webview的onPageFinished事件，Android端一般是用这个事件来标识页面加载完成并显示的，也就是说在此之前，会一直loading，但是Android的OnPageFinished事件会在Javascript脚本执行完成之后才会触发。如果在页面中使用JQuery，会在处理完DOM对象，执行完$(document).ready(function() {});事件自会后才会渲染并显示页面。
-###manifest与缓存相关:
+### manifest与缓存相关:
相关解决方案
-##移动端调适篇
+## 移动端调适篇
-###手机抓包与配host
+### 手机抓包与配host
在PC上，我们可以很方便地配host，但是手机上如何配host，这是一个问题。
@@ -1198,7 +1198,7 @@ PC上开启fiddler，并在设置中勾选“allow remote computers to connect
也可以用CCProxy之类软件，还有一种方法就是买一个随身wifi，然后手机连接就可以了！
-###高级抓包
+### 高级抓包
[iPhone上使用Burp Suite捕捉HTTPS通信包方法](http://danqingdani.blog.163.com/blog/static/1860941952012112353515306/?suggestedreading&wumii "iPhone上使用Burp Suite捕捉HTTPS通信包方法")
@@ -1207,14 +1207,14 @@ PC上开启fiddler，并在设置中勾选“allow remote computers to connect
[实时抓取移动设备上的通信包(ADVsock2pipe+Wireshark+nc+tcpdump)](http://danqingdani.blog.163.com/blog/static/1860941952012111954741585/ "实时抓取移动设备上的通信包(ADVsock2pipe+Wireshark+nc+tcpdump)")
-###静态资源缓存问题
+### 静态资源缓存问题
一般用代理软件代理过来的静态资源可以设置nocache避免缓存，但是有的手机比较诡异，会一直缓存住css等资源文件。由于静态资源一般都是用版本号管理的，我们以charles为例子来处理这个问题
charles 选择静态的html页面文件-saveResponse。之后把这个文件保存一下，修改一下版本号。之后继续发请求，
刚才的html页面文件 右键选择 --map local 选择我们修改过版本号的html文件即ok。这其实也是fiddler远程映射并修改文件的一个应用场景。
-###安卓模拟器和真机区别
+### 安卓模拟器和真机区别
@@ -1223,10 +1223,10 @@ charles 选择静态的html页面文件-saveResponse。之后把这个文件保
-##移动浏览器篇
+## 移动浏览器篇
-###微信浏览器
+### 微信浏览器
微信浏览器的各种bug汇总 （x5内核）
@@ -1253,7 +1253,7 @@ charles 选择静态的html页面文件-saveResponse。之后把这个文件保
微信浏览器踩坑，来自maxZhang
-###【UC浏览器】video标签脱离文档流
+### 【UC浏览器】video标签脱离文档流
场景： |