還是前幾天談的移動端問題，這次說一下專案中遇到的幾個移動端相容性問題

一. 華為榮耀3C的原生瀏覽器問題：

同一行內，存在靠左與靠右的元素時，都必須加上浮動，否則，右浮元素不右浮，影響後續排版。

<div class="forcast-title">
    <span class="fl">上一交易日預報結果</span>
    <span class="fr gray">2016-03-04</span>
</div>
<div class="forcast-cnt ofh gray cb"></div
 
>

兩個行內元素span元素都要浮動才行。

二. ios safari時間顯示問題。

之前設定new Date日期格式的時候，在ios中的safari中發現顯示效果與其他瀏覽器不一致，找了多方面原因，結果是把“-”換成“/”就可以解決了。new Date("year-month-day");只識別new Date("year/month/day");

三. 關於長按識別二維碼問題。

安卓裝置微信中識別沒問題，結果到了ios中識別不了。最終發現是將position設定為fixed，ios的微信中長按會不起作用。要想在ios的微信中實現長按識別二維碼，只需確保二維碼圖片和包住圖片的div都沒有設定position:fiexd

四. 移動端最小識別rem問題。

移動端相對來說相容性不是什麼問題，但是實際專案中發現，如果採用rem: .01rem;有些機型如：魅藍note、iphone5等機型的webview中顯示不出來。華為榮耀有的設定border的時候，有時0.03rem可以，有時不可以，暫時不明所以。所以還是建議，像border這種屬性，移動端可以設定為1px。

五. 點選跳轉到新頁面會有類似點選穿透效果。

部分機型（三星note2、htc one …）在app的webview中出現了點選連結跳轉到下一頁面後，如果要跳轉頁面在當前頁面的按鈕位置有a連結的話，會出現，點選當前頁面連結，直接也點選了下一頁嗎的連結。
可能描述的不是很清楚，更形象點說。A頁面有個連結a，B頁面也有個連結b，並且b的x、y屬性含於a的x、y屬性。那麼會出現點選a連結，直接也點選了b連結。
解決辦法，直接在另一個頁面寫了個maskView遮罩層，setTimeout100毫秒解決的。可能有點low，但是當時上線較急，就想到了這個辦法。

六. 讓hybird app中的webview頁面看起來更像native。

web相較於native有一個好處就是版本更新比較方便，不會出現native應用商店稽核亂七八糟的時間，直接點選app的某個按鈕，使用webview開啟頁面，該頁面隨意替換都非常方便。最常用的就是活動頁面，定期的活動只需要前端開發人員維護即可。但是假如使用者長按螢幕的時候出現選中文字的場景，看起來不那麼想native，如果有解決這個問題的需求，可使用：

Element {
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

其中Element為任意元素，或者直接將其寫入cssReset檔案中。

七. 移動端300ms延遲。

300ms尚可接受，不過因為300ms產生的問題，我們必須要解決。300ms導致使用者體驗並不是很好，解決這個問題，我們一般在移動端用tap事件來取代click事件。
推薦兩個js，一個是fastclick，一個是tap.js
關於300ms延遲，具體請看

八. 移動端 HTML5 audio autoplay 失效問題

這個不是 BUG，由於自動播放網頁中的音訊或視訊，會給使用者帶來一些困擾或者不必要的流量消耗，所以蘋果系統和安卓系統通常都會禁止自動播放和使用 JS 的觸發播放，必須由使用者來觸發才可以播放。
解決方法思路：先通過使用者 touchstart 觸碰，觸發播放並暫停（音訊開始載入，後面用 JS 再操作就沒問題了）。
解決程式碼：

document.addEventListener('touchstart', function () {
    document.getElementsByTagName('audio')[0].play();
    document.getElementsByTagName('audio')[0].pause();
});

九. 根據螢幕大小載入不同js

之前話k線用到highcharts的時候，在iphone5上發現顯示不是很理想，用過highchars的api設定也沒有解決一次設定適應多個螢幕。於是只能用過這種方式來進行多螢幕的適配。

<script>
    var browserWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var script = document.createElement("script");
    if(browserWidth <= 380) {
        script.src = "js/common_small.js"
    }else{
        script.src = "js/common.js"
    }
    document.head.appendChild(script);
</script>

十. 螢幕旋轉的事件和樣式

事件名：window.orientation，取值：正負90表示橫屏模式，0和180表示豎屏模式。

window.onorientationchange = function(){
    switch(window.orientation){
        case -90:
        case 90:
        alert("橫屏:" + window.orientation);
        case 0:
        case 180:
        alert("豎屏:" + window.orientation);
        break;
    }
}  

有些地方發現螢幕旋轉之後，樣式適配不完美，所以根據上面的orientation事件，增加了監測到裝置螢幕旋轉自動重新整理的功能：

function hengshuping(){
    window.location.reload();
}
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);

十一. background-size問題：

華為p8，魅族自帶瀏覽器background-size顯示有問題。

十二. flex佈局問題：

iphone5s、魅族魅藍note不支援(具體是自帶瀏覽器還是什麼瀏覽器忘了，有需要的可以自己嘗試一下)

十三. input輸入框的問題

最開始在input輸入框中，也會習慣性的寫上lineheight（其實可以不寫），當使用placeholder的時候自己測試也沒有問題。但當測試用魅族mx4自帶瀏覽器測試的時候發現，在input輸入框中，輸入游標不會上下居中。當時也感覺很奇怪，然而將lineheight刪掉就可以了，input中的所有元素就是預設居中的。