移動端項目開發小結

原文地址：https://caochangkui.github.io/mobile/

最近開發移動端項目，發現，與PC端項目開發遇到的瀏覽器兼容性問題相比，移動端還有更多的坑的。這裏將遇到一些問題，作出總結。

頁面自適應

各類手機型號，尺寸大小不一，有的屏幕320px寬，有的屏幕414px寬。。若是尺寸寫固定單位px，那麼不少元素會變形，就要用媒體查詢@media針對不一樣的屏幕寬度進行調整，太麻煩。因此，推薦在頁面中使用rem做爲尺寸單位，引入以下代碼便可：

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        callback = function () {
            var clientWidth = docEl.clientWidth;
            clientWidth = clientWidth < 640 ? clientWidth : 640;
            docEl.style.fontSize = clientWidth / 6.4 + 'px';
        };

    if (!doc.addEventListener) return;
    callback(); // 防止頁面加載時的抖動
    win.addEventListener(resizeEvt, callback, false);
    doc.addEventListener('DOMContentLoaded', callback, false);
})(document, window);

若是在640px像素的屏幕下開發，須要爲某字體設置16px大小時，只須要設置爲0.16rem便可；
若是在320px像素的屏幕下開發，須要爲某字體設置16px大小時，只須要設置爲0.32rem便可；

優化alert彈窗

移動端有些錯誤須要提示時，使用默認alert函數的效果很不友好。網上不少比較友好的插件可用，可是爲了避免使項目太大，這裏手動封裝了一個：
其中element爲存放彈出內容的外圍div,test爲彈出內容，position爲彈出框在頁面中的位置。

function showToast(element, test, position) {
    element.html('<p class="error-content">' + test + '</p>');
    element.stop(true, true).animate({
        bottom: position,
        opacity: '1'
    }, 400).animate({
        opacity: '1'
    }, 1000).animate({
        bottom: '-2rem'
    }, 0);
}

使用方法，只需建立以下元素用力存放提示內容，而且設置其定位樣式：

<div id="error-alert">
    <p class="error-content"></p>
</div>

#error-alert {
    position: fixed;
    opacity: 1;
    bottom: -2rem;
    left: 50%;
    right: 0;
    width: 6rem;
    height: 1rem;
    line-height: 1rem;
    margin-left: -3rem;
    background: #fff;
    border-radius: 0.5rem;
    z-index: 999;
}

#error-alert.show-error {
    top: 0;
}

#error-alert .error-content {
    color: #333;
    font-size: 0.4rem;
    line-height: 1rem;
    text-align: center;
}

華爲自帶瀏覽器不支持 es6

真機測試時，發如今華爲手機自帶瀏覽器中，某些點擊事件失效，經逐行排查，發現是 es6 的問題，因此：
通過此網站 http://ruanyf.github.io/es-checker/index.cn.html 檢測後，得出手機端不一樣瀏覽器對es6的支持：

1. 華爲瀏覽器 11%
2. UC瀏覽器 88%
3. QQ瀏覽器 88%
4. 微信內置瀏覽器 90%
5. 釘釘內置瀏覽器 26%

固然，最新的華爲瀏覽器可能已經解決了此問題，可是爲了兼容低版本，建議：

可以使用以下網站將 es6 轉爲 es5 :
https://babeljs.io/repl/#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=true&fileSize=false&timeTravel=false&sourceType=module&lineWrap=false&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=6.26.0&envVersion=

fixed 定位缺陷

IOS下對元素fixed定位時，若軟鍵盤彈出時，會影響其定位效果，android下fixed表現要比iOS更好，軟鍵盤彈出時，不會影響fixed元素定位 。

解決方案：可用iScroll插件或者better-scroll插件解決這個問題

防止圖片點擊放大預覽

1. 只需對不須要進行預覽的圖片加樣式

img {
    pointer-events: none;
}

1. 圖片用背景圖的方式插入

div {
    background: url(a.png) no repeat center;
}

1. 在img元素上添加 onclick="return false", 以下：

<img src="***" onclick="return false" />

1. js事件阻止默認行爲的方法 ----- 有坑！

img.addEventListener('click',function(e){

　　e.preventDefault();

});

注意：上面的 click 事件在移動端中也可以使用 touchend 事件，可是不可以使用 touchstart 或 touchmove 事件。

由於，使用 touchstart 或 touchmove 事件後，當頁面中上部分有個大圖時，當須要滾動頁面往下時，是沒法滾動的，由於出發了這兩個事件。

強制修改input中placeholder字體顏色

input:-moz-placeholder,
textarea:-moz-placeholder {
    color: #292929;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #292929;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #292929;
}

z-index 在IOS中的缺陷

在IOS系統中，z-index爲負數時會失效，因此仍是避免負數吧，正數想多大就多大。。。

iPhoneX 太長

由於 iPhoneX 尺寸太長，致使有些元素在垂向位置不協調，這裏只能使用@media媒體查詢了：

@media all and (max-width: 375px) and (min-height: 750px) {
    .XXX {
        bottom: 4rem;
    }
}

margin-bottom 在蘋果手機上無效

當底部有固定導航欄或固定按鈕時，主頁面會使用margin-bottom或者padding-bottom ， 可是這麼作在蘋果手機上沒法生效，會致使頁面沒法滑動到底部。

解決辦法：在 body 下面添加一個空的 div

<div class="margin-bottom-100"></div>

div.margin-bottom-100 {
    height: 100px;
}

1px 像素邊框的問題

參考這個

css初始樣式重置

@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微軟雅黑",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}
address,cite,dfn,em,i,optgroup,var{font-style:normal}
table{border-collapse:collapse;border-spacing:0;text-align:left}
caption,th{text-align:inherit}
ul,ol,menu{list-style:none}
fieldset,img{border:0}
img,object,input,textarea,button,select{vertical-align:middle}
article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}
textarea{overflow:auto;resize:vertical}
input,textarea,button,select,a{outline:0 none;border: none;}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
mark{background-color:transparent}
a,ins,s,u,del{text-decoration:none}
sup,sub{vertical-align:baseline}
html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}
body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
a {color: #25a4bb;text-decoration: none;}

未完。。。