移動端知識點部分總結

最近寫了些hybird應用嵌入的web頁面，遇到的一些問題，稍稍的總結下：

IOS和安卓不一樣機型上默認line-height不一致

<p class="p1">測試1</p>
    <p class="p2">測試2</p>

    .p2 {
        font-size: 0.14rem;
        margin-top: 0.1rem;
    }

因爲2種機型的默認line-height不一致,這和字體、瀏覽器的佈局模型、操做系統的字體渲染引擎，所以遇到這種狀況的時候會選擇手動的設置line-height的值，而後再經過margin或者padding去控制2個p標籤之間的間距。

.p2 {
        font-size: 0.14rem;
        margin-top: 0.12rem;
        height: 0.14rem;
        line-height: 0.14rem;
   }

IOS下Input元素focus後沒法喚起鍵盤

有個需求就是一進入到頁面，用戶不作任何操做,input標籤就被獲取焦點,同時鍵盤被呼出。

獲取焦點很容易作到,直接經過調用原生的focus()事件就好了。可是不能直接喚起鍵盤。

這是我關於這個問題的描述: IOS下Input元素focus後沒法喚起鍵盤

文檔上說明的很清楚了。native上keyboardDisplayRequiresUserAction爲true時。必需要經過用戶點擊屏幕去主動觸發鍵盤的喚起。

這個時候有2種方案了：

• 直接點擊input標籤，喚起鍵盤

• 經過點擊屏幕的其餘區域，而後觸發input的focus事件,喚起鍵盤

這個時候我是選擇的第二種方案:

進入頁面後,給頁面加一層mask,在mask綁定點擊事件,經過這個點擊事件去觸發鍵盤的喚起.

let maskEle = document.querySelector('.mask'),
        inputEle = document.querySelector('.input');
        
    maskEle.addEventListener('click', () => {
        inputEle.focus()
        //而後隱藏maskEle
    });

安卓機下4.x的版本經過input的focus事件能夠直接喚起鍵盤，不過5.0後也須要用戶去主動的喚起鍵盤.

滑動穿透

dialog組件:

.dialog {
        position: fixed;
        z-index: 999;
    }

若是頁面比較長,滑動頁面的時候,dialog組件不動，可是dialog下部的可能會滑動的頁面會滑動.
個人處理方法就是在dialog的mask上綁定:

document.querySelector('.dialog-mask').addEventListener('touchmove', e => e.preventDefault());

另外還能夠經過主動設置底部元素的overflow屬性來控制是否能滑動.

input標籤監聽input事件，輸入中文的時候出現英文字母也會被輸入的狀況

let inputEle = document.querySelector('.input');
    
    //限制空白符的輸入
    inputEle.addEventListener('input', (e) => {
        let target = e.target;
        
        target.value = target.value.replace(/\s/g, '');
        
    });

這個時候輸入中文的時候，英文字母也會被輸入.

經過改變input監聽事件的類型:

inputEle.addEventListener('keyup', (e) => {
        let target = e.target;
        
        target.value = target.value.replace(/\s/g, '');
    })

這樣就會避免輸入中文的時候連帶字母也被輸入進去了。另一種解決方案,利用compositionstart和compositionend屬性,具體解決過程請戳我
若是想要限制input標籤輸入的位數，儘可能使用input的maxlength屬性.
不過在移動端, type="number"的maxlength不起做用。
這個時候可使用input的pattern來達到這一效果

<input type="text" pattern="\d*" maxlength="11">

不過pattern這個屬性在移動端,特別是安卓機下的支持度不是很好.(查看兼容性請戳我)

安卓機下背景色從border-radius溢出

在華爲的某款機型下,安卓版本爲4.2.2。設置:

.circle {
        width: 0.04rem;
        height: 0.04rem;
        border-radius: 100%;
        background-color: #333;
    }

這個時候，並無表現爲正常的黑色圓形，而是一個正方形。

具體的解決方案見.一絲的blog

僞類選擇器:last-child和:last-of-type的區別

• :last-child

• :first-child

• :nth-child
  3者都是從結構上來講的

<div class="parent">
        <h1>1</h1>
        <h2>2</h2>
        <h3>3</h3>
        <h4>4</h4>
    </div>

• h1:first-child能夠匹配到第一個h1

• h2:first-child匹配不到元素

• h3:first-child匹配不到元素

• h4:first-child匹配不到元素

• h4:last-child匹配到最後一個元素

---

• h1:first-of-type能夠匹配到第一個h1

• h2:first-of-type匹配到h2

• h3:first-of-type匹配到h3

• h4:first-of-type匹配到h4

• h4:last-of-type匹配到最後一個元素

first-child和first-of-type的區別就是前者是匹配結構上的第一個元素,然後者是匹配子元素中同一類型元素的第一個元素.

同理:

• nth-child 和 nth-of-type

• last-child 和 last-of-type

input獲取焦點時,部分機型軟鍵盤彈出後會遮擋input標籤

測試機型：

• 華爲,oppo,小米安卓4.x的機型,頁面不發生滾動,軟鍵盤彈出都會遮擋input標籤

• iphone 5+ 自帶的輸入法軟鍵盤彈出不會遮擋,頁面會發生滾動

• iphone 5+ 訊飛輸入法，搜狗(頁面發生滾動，可是軟鍵盤有一段高出的部分遮擋了input標籤)

安卓下的解決方案請戳我

軟鍵盤彈出後會觸發resize事件，監聽resize事件完成頁面的自動滾動.

IOS下第三方輸入高出部分遮擋input標籤暫時還未找到解決方案.

移動端1px問題

解決方案可點我

我的推薦的方案(less):

.border-new-1px(@color, @radius, @style) {
    position: relative;
    &::after {
        content: "";
        pointer-events: none;
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        transform-origin: 0 0;
        border: 1px @style @color;
        border-radius: @radius;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
    }

    @media (-webkit-min-device-pixel-ratio: 3) {
        &::before, &::after {
            width: 300%;
            height: 300%;
            -webkit-transform: scale(.33);
            -webkit-transform-origin: 0 0;
            transform: scale(.33);
            border-radius: @radius * 3;
        }
        &::before {
            -webkit-transform-origin: left bottom;
        }
    }
    @media (-webkit-min-device-pixel-ratio: 2) {
        &::after, &::before {
            width: 200%;
            height: 200%;
            border-radius: @radius * 2;
            -webkit-transform: scale(.5);
            transform: scale(.5);
        }
    }
}

經過去檢測device-pixel-ratio屬性(物理像素和css像素的比),例如當device-pixel-ratio爲3時，會將元素的長度和寬度擴大3倍，而後經過transform: scale(.33)進行縮小。

另外還有一種 @Humphry 提供的方案也挺好用的:

使用svg做爲background-image來實現, 不過最好仍是使用預編譯封裝成函數, 這樣寫起來的效率也很高 具體方案請戳我.

safari下時間轉化格式的問題

在safari下有這樣一個問題:

打印時間
    
    alert(new Date('2012-12-12'));
    
    //在andriod機器下正常顯示,在ios機器下Invalid Date
    //當時看到後就是一臉黑人❓

具體的緣由及解決方案請戳我

在先後端的時間交互過程當中我以爲統一轉化爲時間戳仍是靠譜一點。避免不一樣瀏覽器對不一樣時間的解析方式不一樣而出現兼容性的問題