移动端 常见问题整理

使用iScroll时，input等不能输入内容的解决方法

?

1 2 3 4 5 6 7 8 9 10

<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；需要重新设置；

 

?

1	<meta name="viewport" content="width=1200, target-densitydpi=high-dpi, user-scalable=no" />

移动端浏览器中经常会出现高度100%的渲染错误，页面低端和系统自带的导航条重合了，高度的不正确我们需要重置修正它

?

1	document.documentElement.style.height = window.innerHeight + 'px';

 

叠加区高亮

?

1	input, textarea, button, a{-webkit-tap-highlight-color:rgba(0,0,0,0);}

 

button在ios上的默认样式 屏蔽输入框怪异的内阴影。

?

1	-webkit-appearance: none;border-radius: 0

?

1

IOS 等Retina屏幕 图片有点朦胧胧的感觉 根据“pixel rotio” 设置图片大小；

?

1	-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）绑定一个空匿名方法:

?

1 2	var element=document.getElementsById(”btnShare”); element.addEventListener(‘touchstart’,function(){},false)

?

1

移动端还是PC短 如果使用fixed 元素；元素不停渲染问题；这个可以用谷歌浏览器开发者—esc -esc-rendering-show paint rectangles 查看

?

1	-webkit-transform：translateZ(0);

translateZ 还能修复部分 > 字符 问题；

 

父元素如果有了transform属性，子元素设置的fixed会失效。

规范中有规定：如果元素的transform值不为none，则该元素会生成包含块和层叠上下文。
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

 

http://www.w3cfuns.com/article-1248-1.html