移動端 常見問題整理 iOS下的 Fixed + Input 調用鍵盤的時候fixed無效問題解決方案

使用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時又會有所不同。

最簡單的解決方法就是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