[判断 iPad 和 iPhone 的版本和状态的 CSS 媒体查询代码](http://yujiangshui.com/document/css-media-queries-for-ipads-and-iphones-chinese-version/)
[Viewport Resizer](http://lab.maltewassermann.com/viewport-resizer/ "resize")
[screenqueri](http://beta.screenqueri.es/ "resize")
[responsivepx](http://responsivepx.com "resize")
[responsinator](http://www.responsinator.com/ "resize")
[resizemybrowser](http://resizemybrowser.com/ "resize")
[quirktools](https://quirktools.com/screenfly/ "resize")
## 一篇webapp开发的最佳实践与中文总结
[原文](http://blog.forecast.io/its-not-a-web-app-its-an-app-you-install-from-the-web/)
[当前 WEB APP 开发的最佳实践](http://lyric.im/best-practice-for-web-app-development)
## 来自[maxzhang](https://github.com/maxzhang "ava")的一些移动端经验总结干货
[移动Web单页应用开发实践——页面结构化](https://github.com/maxzhang/maxzhang.github.com/issues/8 "ava")
[移动Web产品前端开发口诀——“快”](https://github.com/maxzhang/maxzhang.github.com/issues/1 "ava")
[移动Web开发，4行代码检测浏览器是否支持position:fixed](https://github.com/maxzhang/maxzhang.github.com/issues/7 "ava")
[使用border-image实现类似iOS7的1px底边](https://github.com/maxzhang/maxzhang.github.com/issues/4 "ava")
[移动端web页面使用position:fixed问题总结](https://github.com/maxzhang/maxzhang.github.com/issues/2 "ava")
[移动Web开发实践——解决position:fixed自适应BUG](https://github.com/maxzhang/maxzhang.github.com/issues/11 "ava")
[移动手机浏览器m3u8格式视频流播放支持程度测试](https://github.com/maxzhang/maxzhang.github.com/issues/19 "ava")
## 从`meta`开始
本节之后可能也涉及 `meta` 标签，但为了更加全面的摸透 `meta` 特地用一节的篇幅来系统概述。
### 一、meta 标签分两大部分：HTTP 标题信息（http-equiv）和页面描述信息（name）。
#### 1、http-equiv 属性的 Content-Type 值（显示字符集的设定）
说明：设定页面使用的字符集，用以说明主页制作所使用的文字语言，浏览器会根据此来调用相应的字符集显示 page 内容。
用法：
```html
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

我看到很多网站为了实现这一效果，用了第三方类库，最常用的是iscroll（包括新浪手机页，百度等）
我一开始也使用，不过自从用了```-webkit-overflow-scrolling: ```touch;样式后，就完全可以抛弃第三方类库了，把它加在```body{}```区域，所有的```overflow```需要滚动的都可以生效了。
## 页面描述
```html
<link rel="apple-touch-icon-precomposed" href="http://www.xxx.com/App_icon_114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.xxx.com/App_icon_72.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.xxx.com/App_icon_114.png" />

-webkit-border-bottom-left-radius: radius;
-webkit-border-top-left-radius: horizontal_radius vertical_radius;
-webkit-border-radius: radius;      //容器圆角
-webkit-box-sizing: sizing_model; 边框常量值：border-box/content-box
-webkit-box-shadow: hoff voff blur color; //容器阴影（参数分别为：水平X 方向偏移量；垂直Y 方向偏移量；高斯模糊半径值；阴影颜色值）
-webkit-margin-bottom-collapse: collapse_behavior; 常量值：collapse/discard/separate
-webkit-margin-start: width;
-webkit-padding-start: width;
-webkit-border-image: url(borderimg.gif) 25 25 25 25 round/stretch round/stretch;
-webkit-appearance: push-button;   //内置的CSS 表现，暂时只支持push-button

direction: rtl
unicode-bidi: bidi-override; 常量：bidi-override/embed/normal

clip: rect(10px, 5px, 10px, 5px)
resize: auto; 常量：auto/both/horizontal/none/vertical
visibility: visible; 常量: collapse/hidden/visible
-webkit-transition: opacity 1s linear; 动画效果 ease/linear/ease-in/ease-out/ease-in-out
-webkit-backface-visibility: visibler; 常量：visible(默认值)/hidden
-webkit-box-reflect: right 1px; 镜向反转
-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom,
from(transparent), color-stop(0.5, transparent), to(white));
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));;   //CSS 遮罩/蒙板效果
-webkit-mask-attachment: fixed; 常量：fixed/scroll
-webkit-perspective: value; 常量：none(默认)
-webkit-perspective-origin: left top;
-webkit-transform: rotate(5deg);
-webkit-transform-style: preserve-3d; 常量：flat/preserve-3d; (2D 与3D)

content: “Item” counter(section) ” “;
This resets the counter.
First section
>two section
three section
counter-increment: section 1;
counter-reset: section;

page-break-after: auto; 常量：always/auto/avoid/left/right
page-break-before: auto; 常量：always/auto/avoid/left/right
page-break-inside: auto; 常量：auto/avoid

-webkit-background-clip: content; 常量：border/content/padding/text
-webkit-background-origin: padding; 常量：border/content/padding/text
-webkit-background-size: 55px; 常量：length/length_x/length_y

unicode-range: U+00-FF, U+980-9FF;

text-shadow: #00FFFC 10px 10px 5px;
text-transform: capitalize; 常量：capitalize/lowercase/none/uppercase
word-wrap: break-word; 常量：break-word/normal
-webkit-marquee: right large infinite normal 10s; 常量：direction(方向) increment(迭代次数) repetition(重复) style(样式) speed(速度);
-webkit-marquee-direction: ahead/auto/backwards/down/forwards/left/reverse/right/up
-webkit-marquee-incrementt: 1-n/infinite(无穷次)
-webkit-marquee-speed: fast/normal/slow
-webkit-marquee-style: alternate/none/scroll/slide
-webkit-text-fill-color: #ff6600; 常量：capitalize, lowercase, none, uppercase
-webkit-text-security: circle; 常量：circle/disc/none/square
-webkit-text-size-adjust: none; 常量:auto/none;
-webkit-text-stroke: 15px #fff;
-webkit-line-break: after-white-space; 常量：normal/after-white-space
-webkit-appearance: caps-lock-indicator;
-webkit-nbsp-mode: space; 常量： normal/space
-webkit-rtl-ordering: logical; 常量：visual/logical
-webkit-user-drag: element; 常量：element/auto/none
-webkit-user-modify: read- only; 常量：read-write-plaintext-only/read-write/read-only
-webkit-user-select: text; 常量：text/auto/none

-webkit-border-horizontal-spacing: 2px;
-webkit-border-vertical-spacing: 2px;
-webkit-column-break-after: right; 常量：always/auto/avoid/left/right
-webkit-column-break-before: right; 常量：always/auto/avoid/left/right
–webkit-column-break-inside: logical; 常量：avoid/auto
-webkit-column-count: 3; //分栏
-webkit-column-rule: 1px solid #fff;
style:dashed,dotted,double,groove,hidden,inset,none,outset,ridge,solid

-webkit-box-align: baseline,center,end,start,stretch 常量：baseline/center/end/start/stretch
-webkit-box-direction: normal;常量：normal/reverse
-webkit-box-flex: flex_valuet
-webkit-box-flex-group: group_number
-webkit-box-lines: multiple; 常量：multiple/single
-webkit-box-ordinal-group: group_number
-webkit-box-orient: block-axis; 常量：block-axis/horizontal/inline-axis/vertical/orientation
–webkit-box-pack: alignment; 常量：center/end/justify/start

-webkit-animation: title infinite ease-in-out 3s;
animation 有这几个属性：
-webkit-animation-name： //属性名，就是我们定义的keyframes
-webkit-animation-duration：3s //持续时间
-webkit-animation-timing-function： //过渡类型：ease/ linear(线性) /ease-in(慢到快)/ease-out(快到慢) /ease-in-out(慢到快再到慢) /cubic-bezier
-webkit-animation-delay：10ms //动画延迟(默认0)
-webkit-animation-iteration-count： //循环次数(默认1)，infinite 为无限
-webkit-animation-direction： //动画方式：normal(默认 正向播放)； alternate(交替方向，第偶数次正向播放，第奇数次反向播放)

-webkit-transform: 类型（缩放scale/旋转rotate/倾斜skew/位移translate）
scale(num,num) 放大倍率。scaleX 和 scaleY(3)，可以简写为：scale(* , *)
rotate(*deg) 转动角度。rotateX 和 rotateY，可以简写为：rotate(* , *)
Skew(*deg) 倾斜角度。skewX 和skewY，可简写为：skew(* , *)
translate(*,*) 坐标移动。translateX 和translateY，可简写为：translate(* , *)。

-webkit-tap-highlight-color: 颜色

document.implementation.hasFeature("http:// www.w3.org/TR/SVG11/feature#Image", "1.1")

window.scrollY
window.scrollX

this.value = this.value.replace(/\u2006/g, '');

## JS动态生成的select下拉菜单在Android2.x版本的默认浏览器里不起作用
解决方法删除了```overflow-x:hidden```; 然后在JS生成下来菜单之后focus聚焦，这两步操作之后解决了问题。(来自岛都-小Qi)
参考 ```HTML <select> control disabled in Android WebView (in emulator)``` [http://stackoverflow.com/questions/4697908/html-select-control-disabled-in-android-webview-in-emulator](http://stackoverflow.com/questions/4697908/html-select-control-disabled-in-android-webview-in-emulator)
## andriod上去掉语音输入按钮

	
## 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)
[HTML5 input type number vs tel](http://stackoverflow.com/questions/8216278/html5-input-type-number-vs-tel)
[iPhone: numeric keyboard for text input](http://stackoverflow.com/questions/6178556/iphone-numeric-keyboard-for-text-input)
[Managing the Keyboard](https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html)	
[HTML5 inputs and attribute support](http://www.miketaylr.com/code/input-type-attr.html)
## iphone6的那些事
[iPhone 6 屏幕揭秘](http://wileam.com/iphone-6-screen-cn/)
## ios6跟iphone5的那些事
ip5的媒体查询

　　
使用媒体查询，提供不同的启动图片：
```html
<link href="startup-568h.png" rel="apple-touch-startup-image" media="(device-height: 568px)">
<link href="startup.png" rel="apple-touch-startup-image" sizes="640x920" media="(device-height: 480px)">

browser.getSettings().setAppCacheEnabled(true);
browser.getSettings().setAppCachePath("/data/data/[com.packagename]/cache");
browser.getSettings().setAppCacheMaxSize(5*1024*1024); // 5MB

browser.getSettings().setDatabaseEnabled(true);
browser.getSettings().setDomStorageEnabled(true);
String databasePath = browser.getContext().getDir("databases", Context.MODE_PRIVATE).getPath();
browser.getSettings().setDatabasePath(databasePath);//Android　webview的LocalStorage有个问题，关闭APP或者重启后，就清楚了，所以需要browser.getSettings().setDatabase相关的操作，把LocalStoarge存到DB中
 
myWebView.setWebChromeClient(new WebChromeClient(){
	　　　@Override
	　　　public void onExceededDatabaseQuota(String url, String databaseIdentifier, long currentQuota, long estimatedSize, long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater)
	　　 {
	　　　　　　　quotaUpdater.updateQuota(estimatedSize * 2);
	　　　}
}

browser.getSettings().setBuiltInZoomControls(false);

测试环境：UC浏览器 8.7/8.6 + Android 2.3/4.0 。
 
【UC浏览器】position:fixed 属性在UC浏览器的奇葩现象
场景：设置了position: fixed 的元素会遮挡z-index值更高的同辈元素。
　　　在8.6的版本,这个情况直接出现。
　　　在8.7之后的版本,当同辈元素的height大于713这个「神奇」的数值时,才会被遮挡。
测试环境：UC浏览器 8.8_beta/8.7/8.6 + Android 2.3/4.0 。
Demo：<http://t.cn/zYLTSg6>
 
【QQ手机浏览器】不支持HttpOnly
场景：带有HttpOnly属性的Cookie，在QQ手机浏览器版本从4.0开始失效。JavaScript可以直接读取设置了HttpOnly的Cookie值。
测试环境：QQ手机浏览器 4.0/4.1/4.2 + Android 4.0 。
 
【MIUI原生浏览器】浏览器地址栏hash不改变
场景：location.hash 被赋值后，地址栏的地址不会改变。
　　　但实际上 location.href 已经更新了，通过JavaScript可以顺利获取到更新后的地址。
　　　虽然不影响正常访问，但用户无法将访问过程中改变hash后的地址存为书签。
测试环境：MIUI 4.0
 
【Chrome Mobile】fixed元素无法点击
 场景：父元素设置position: fixed;
　　　子元素设置position: absolute;
　　　此时，如果父元素/子元素还设置了overflow: hidden 则出现“父元素遮挡该子元素“的bug。
　　　视觉(view)层并没有出现遮挡，只是无法触发绑定在该子元素上的事件。可理解为：「看到点不到」。
补充： 页面往下滚动，触发position: fixed;的特性时，才会出现这个bug，在最顶不会出现。
测试平台： 小米1S，Android4.0的Chrome18
demo： <http://maplejan.sinaapp.com/demo/fixed_chromemobile.html>
解决办法： 把父元素和子元素的overflow: hidden去掉。
以上来源于  <http://www.cnblogs.com/maplejan/archive/2013/04/26/3045928.html>
【微信浏览器】
因为微信浏览器屏蔽了一部分链接图片，所以需要引导用户去打开新页面，可以用以下方式判断微信浏览器的ua
```javascript
function is_weixn(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger") {
        return true;
    } else {
        return false;
    }
}

###iscroll4

 
1.滚动容器点击input框、select等表单元素时没有响应

改为

2.往iscroll容器内添加内容时，容器闪动的bug
源代码的

改成

	
在配置iscroll时，useTransition设置成false
3.过长的滚动内容，导致卡顿和app直接闪退
1). 不要使用checkDOMChanges。虽然checkDOMChanges很方便，定时检测容器长度是否变化来refresh，但这也意味着你要消耗一个Interval的内存空间
2). 隐藏iscroll滚动条，配置时设置hScrollbar和vScrollbar为false。
3). 不得已的情况下，去掉各种效果，momentum、useTransform、useTransition都设置为false
4.左右滚动时，不能正确响应正文上下拉动
iscroll的闪动问题也与渲染有关系，可以参考
[运用webkit绘制渲染页面原理解决iscroll4闪动的问题](http://www.iunbug.com/archives/2012/09/19/411.html "iscroll4")
[iscroll4升级到5要注意的问题](http://blog.csdn.net/gcz564539969/article/details/9156141 "iscroll5")
## 移动端字体问题(待补充)
[dp、sp、px傻傻分不清楚](http://zhuanlan.zhihu.com/zhezhexiong/19565895)
[Resolution Independent Mobile UI](http://www.sencha.com/blog/resolution-independent-mobile-ui)
[Pixel density, retina display and font-size in CSS](http://stackoverflow.com/questions/12058574/pixel-density-retina-display-and-font-size-in-css)
[各种ratio](http://bjango.com/articles/min-device-pixel-ratio/)
## 跨域问题
手机浏览器也是浏览器，在ajax调用外部api的时候也存在跨域问题。当然利用phonegap打包后，由于协议不一样就不存在跨域问题了。
但页面通常是需要跟后端进行调试的。一般会报类似

以及

这时候可以让后端加上两个http头

第一个头可以避免跨域问题，第二个头可以方便ajax请求设置content-type等配置项
## phonegap部分
*Should not happen: no rect-based-test nodes found*
在android项目中的assets中的html页面中加入以下代码，便可解决问题
```css
window,html,body{
    overflow-x:hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overflow: scroll !important;
}