使用iScroll时，input等不能输入内容的解决方法
<script>
function allowFormsInIscroll(){
[].slice.call(document.querySelectorAll('input, select, button')).forEach(function(el){
el.addEventListener(('ontouchstart' in window)?'touchstart':'mousedown', function(e){
e.stopPropagation();
})
})
}
document.addEventListener('DOMContentLoaded', allowFormsInIscroll, false);
</script>
iscroll需要一直监听用户的touch操作，以便灵敏的做出对应效果，所以它把其余的默认事件屏蔽了。
当用iScroll时候，不能使用:focus{outline:0}伪类，否则滑动会卡
当 ipad上网页宽度超过980是，页面被截断 content="width=980 默认980；需要重新设置；
<meta name="viewport" content="width=1200, target-densitydpi=high-dpi, user-scalable=no" />
移动端浏览器中经常会出现高度100%的渲染错误，页面低端和系统自带的导航条重合了，高度的不正确我们需要重置修正它
document.documentElement.style.height = window.innerHeight + 'px';
叠加区高亮
input, textarea, button, a{-webkit-tap-highlight-color:rgba(0,0,0,0);}
button在ios上的默认样式 屏蔽输入框怪异的内阴影。
-webkit-appearance: none;border-radius: 0
IOS 等Retina屏幕 图片有点朦胧胧的感觉 根据“pixel rotio” 设置图片大小；
-webkit-background-size可以做高清图标，不过一些低版本的android只能识别background-size
iOS中，当你点击比如 input 准备输入时，虚拟键盘弹出，整个视窗的 高度 就会变为 减去键盘 的高度，加入你在底部有fixed的元素比如btn，这个元素就会跑上来。我是当focus时就把它设:absolute ;
在部分android 机型中的输入框可能多余的浮出表单，经过观察与测试发现只有input:password类型的输入框存在，那么我们只要使用input:text类型的输入框并通过样式
-webkit-text-security: disc;
隐藏输入密码从而解决。
电脑模拟器上 img border-radius:50%; overflow:hidden;没出现问题，到手机上 img四角成了方框；有时候border-radius百分比无效
border-radius:50%; overflow:hidden;
android 4.0版本以下CSS :active伪状态效果无法兼容，我们给该元素的touch系列的事件（touchstart/touchend/touchmove）绑定一个空匿名方法:
var element=document.getElementsById(”btnShare”);
element.addEventListener(‘touchstart’,function(){},false)
移动端还是PC短 如果使用fixed 元素；元素不停渲染问题；这个可以用谷歌浏览器开发者—esc -esc-rendering-show paint rectangles 查看
-webkit-transform：translateZ(0);
translateZ 还能修复部分 > 字符 问题；
父元素如果有了transform属性，子元素设置的fixed会失效。
规范中有规定：如果元素的transform值不为none，则该元素会生成包含块和层叠上下文。
CSS Transforms Module Level 1
不只在手机上，电脑上也一样。除了fixed元素会受影响之外，z-index（层叠上下文）值也会受影响。绝对定位元素等和包含块有关的属性都会受到影响。当然如果transform元素的display值为inline时又会有所不同。
CSS Transforms Module Level 1
不只在手机上，电脑上也一样。除了fixed元素会受影响之外，z-index（层叠上下文）值也会受影响。绝对定位元素等和包含块有关的属性都会受到影响。当然如果transform元素的display值为inline时又会有所不同。
最简单的解决方法就是transform元素内部不能有absolute、fixed元素。
textarea 文本框高度自动
//文本框高度自动
var autoTextarea = function(elem, extra, maxHeight) {
extra = extra || 0;
var isFirefox = !!document.getBoxObjectFor
|| "mozInnerScreenX" in window, isOpera = !!window.opera
&& !!window.opera.toString().indexOf("Opera"), addEvent = function(
type, callback) {
elem.addEventListener ? elem.addEventListener(type, callback,
false) : elem.attachEvent("on" + type, callback)
}, getStyle = elem.currentStyle ? function(name) {
var val = elem.currentStyle[name];
if (name === "height" && val.search(/px/i) !== 1) {
var rect = elem.getBoundingClientRect();
return rect.bottom - rect.top
- parseFloat(getStyle("paddingTop"))
- parseFloat(getStyle("paddingBottom")) + "px"
}
return val
} : function(name) {
return getComputedStyle(elem, null)[name]
}, minHeight = parseFloat(getStyle("height"));
elem.style.resize = "none";
var change = function() {
var scrollTop, height, padding = 0, style = elem.style;
if (elem._length === elem.value.length) {
return
}
elem._length = elem.value.length;
if (!isFirefox && !isOpera) {
padding = parseInt(getStyle("paddingTop"))
+ parseInt(getStyle("paddingBottom"))
}
scrollTop = document.body.scrollTop
|| document.documentElement.scrollTop;
elem.style.height = minHeight + "px";
if (elem.scrollHeight > minHeight) {
if (maxHeight && elem.scrollHeight > maxHeight) {
height = maxHeight - padding;
style.overflowY = "auto"
} else {
height = elem.scrollHeight - padding;
style.overflowY = "hidden"
}
style.height = height + extra + "px";
scrollTop += parseInt(style.height) - elem.currHeight;
document.body.scrollTop = scrollTop;
document.documentElement.scrollTop = scrollTop;
elem.currHeight = parseInt(style.height) < 100 ? parseInt(style.height)
: 100 + "px"
}
};
addEvent("propertychange", change);
addEvent("input", change);
addEvent("focus", change);
change();
};
autoTextarea(textsa);// 调用
其他新增的css3注意细节
ios Fixed + Input 失效解决办法
参考淘宝的 就好
参考网址
http://www.ghugo.com/chrome-rendering-tools-1/ 这个非常好
http://blog.bingo929.com/transform-translate3d-translatez-transition-gpu-hardware-acceleration.html