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

時間 2019-11-24

標籤移動常見問題整理 ios fixed input 調用鍵盤時候無效問題解決方案欄目無線简体版

原文原文鏈接

使用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操做，以便靈敏的作出對應效果，因此它把其他的默認事件屏蔽了。css

當用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百分比無效html

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 還能修復部分 > 字符問題；android

父元素若是有了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);// 調用