1. 程式人生 > >移動端開發遇到的相容性問題

移動端開發遇到的相容性問題

我開始做這個移動端專案,已經有一段時間了,我大致把我遇到的一些問題列舉出來。以便加深自己對於技術點的理解,也可以相互學習與交流。

1. button高亮顯示問題
問題
點選置灰狀態的button按鈕,按鈕會閃一下藍色,這和我原本的樣式衝突。在此之前已經清除了outline:none,:active偽類元素等造成的影響,那麼為什麼還是會有這種現象。
我們在做移動端開發的時候忽略了一個鮮為人知的屬性。 -webkit-tap-highlight-color。它的功能是移動端點選時的背景設定。這個屬性只適用於ios。當我們點選button時,它會高亮顯示。outline:none在移動端這時是不起作用的,想要去除文字框的預設樣式使用的是-webkit-appearance,在iOS上加上這個屬性才能給按鈕和輸入框自定義樣式,聚焦時取消預設樣式是-webkit-tap-highlight-color。
解決方案


在這個元素上面加上 -webkit-tap-highlight-color:transparent; -webkit-appearance: none; 就可以解決上面這個問題了。
補充
-webkit-user-select: none; // 禁止頁面文字選擇 ,此屬性不繼承,一般加在body上規定整個body的文字都不會自動調整。但是它會導致input/textarea輸入框無法輸入,我們寫的時候要注意。

*:not(input,textarea) { 
    -webkit-touch-callout: none; 
    -webkit-user-select
: none; }

-webkit-touch-callout:none; 禁用長按頁面時的彈出選單(iOS下有效) ,取消了放大鏡?效果。但是注意的是在企業微信裡面這個是不起作用的,長按依舊會有放大鏡效果。
2. ios字型問題
問題
對於手機上的字型來說,我們不能控制。我們主要針對字型修改的就是:襯線與非襯線、順滑設定。
解決方案

body{
color: $common-text;
font-family:’Blue Sky Standard Regular’,’Noto Sans CJK SC Regular’,’PingFangSC’,sans-serif
; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

3. 多行文字溢位失效
問題
正常情況下,我們預設最多顯示三行文字,程式碼如下所示。但是我們在審查元素的時候發現-webkit-box-orient: vertical;失效。

overflow : hidden; 
text-overflow: ellipsis; 
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

解決方案:
這是由於webpack打包時,optimize-css-assets-webpack-plugin這個外掛造成的。註釋掉webpack.prod.conf.js中下面的程式碼就可以了。

new OptimizeCSSPlugin({
  cssProcessorOptions: config.build.productionSourceMap
    ? { safe: true, map: { inline: false } }
    : { safe: true }
}),

除了上面說的解決辦法之外,我們也可以採用特殊處理,程式碼如下所示:

/*! autoprefixer: off */
 -webkit-box-orient: vertical;
/* autoprefixer: on */

4. ES6新特性:symbol型別造成的問題

問題
在專案中,我需要刪除陣列中的某個元素,程式碼如下。

this.state.tag.splice(this.state.tag.findIndex(tag => tag.id ===
item.id),1);

我檢查了好幾遍,沒有發現程式碼有什麼問題,但是控制檯在報錯,我發現這是由於tag陣列的每一項是symbol型別的物件,splice不能刪除,會報錯。
sybmol型別官方解釋是說:

The Symbol constructor is the %Symbol% intrinsic object and the
initial value of the Symbol property of the global object. When Symbol
is called as a function, it returns a new Symbol value. The Symbol
constructor is not intended to be used with the new operator or to be
subclassed. It may be used as the value of an extends clause of a
class definition but a supercall to the Symbol constructor will cause
an exception.

我就不解釋這是什麼意思了(英語不好,多多見諒)。
解決方案
我用的辦法比較笨拙,為了使用splice方法,我是又遍歷重新拿到tag陣列,然後賦給tag。如果大家有好的方法,可以交流一下。Thank you!