整理幾個移動端的相容性問題
還是前幾天談的移動端問題,這次說一下專案中遇到的幾個移動端相容性問題
一. 華為榮耀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中的所有元素就是預設居中的。