那些移動端web踩過的坑2

時間 2019-11-08

標籤那些移動 web 欄目無線简体版

原文原文鏈接

原文連接：https://geniuspeng.github.io/2018/04/26/mobile-issues2/前端

坑是無窮無盡的，嗯…長江後坑推前坑~~
git

關於音頻自動播放

H5的audio標籤實現了瀏覽器端的音頻播放可能性，雖然目前的手機瀏覽器也都支持這個標籤和相關屬性，但不一樣的手機對其表現行爲仍是五花八門，並且有的時候還和客戶端那邊的音頻控制相關。此次遇到了一個問題是iOS中沒法自動播放音頻（autoplay無效，目測他們是考慮了流量問題吧），解決方法也還好，通常若是是微信裏，可使用他們自帶的一個事件來解決。不過須要先引入他們的js：
github

1	<script src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"/>

而後在ready以後監聽一個微信定義特殊的事件WeixinJSBridgeReady：
編程

1
2
3

document.addEventListener("WeixinJSBridgeReady", function () { 
    document.getElementById('bgm').play(); 
}, false);

若是是Safari這種，基本上就是經過交互來解決了，好比讓用戶第一次觸摸的時候播放音樂
小程序

1
2
3

$(document).one('touchstart', function() {
    document.getElementById('bgm').play(); 
})

關於軟鍵盤問題

H5頁面中的輸入框，輸入框focus的時候就會彈出軟鍵盤，失去焦點的時候鍵盤消失。其實正常來說都還好，只是有的時候軟鍵盤可能把輸入框擋住，或者按鈕擋住，這個倒不算什麼大問題，此次使人頭疼的是某些奇葩安卓機，若是使用了絕對定位或者fixed，軟鍵盤彈出來的時候把頁面往上推，推的下面出來一大塊空白特別醜~這裏的解決方法其實也很簡單
微信小程序

1	$('body').height($('body')[0].clientHeight);

還有一些更奇葩的安卓手機，軟鍵盤出來的時候把頁面頂上去，消失的時候把頁面往下拉，又拉出一大片空白區域，須要手動上滑一下才正常。這裏試了好多方法，最後找到了一個還算能夠解決的,須要找到那個被拉下來的相關元素，而後執行scrollIntoView()方法便可，
瀏覽器

let input = document.querySelector('input')
input.addEventListener('blur', function (e) {
    e.preventDefault();
    setTimeout(() => {
        $('.the-element')[0].scrollIntoView(); 
    }, 0)
})

關於scrollIntoView的用法:
微信

element.scrollIntoView(); 
//不顯示聲明任何參數，則至關因而element.scrollIntoView(true) 
 
element.scrollIntoView(alignToTop); 
//Boolean類型參數 
//若是爲 true，則元素的頂部將盡量滾動到與父元素可見區域頂部對齊的位置，這是默認值。
//若是爲 false，則元素的底部將盡量滾動到與父元素可見區域底部對齊的位置 
 
element.scrollIntoView(scrollIntoViewOptions); 
//Object類型參數 

{ 
behavior: 'auto' | 'instant' | 'smooth', 
block: 'start' | 'end' 
} 

//behavior：定義了元素滾動的行爲，instant表明是當即滾動元素，smooth表明動畫性的平滑滾動，但大部分瀏覽器並不支持smooth這個屬性值，通常都是 instant。 
//block：定義了元素滾動的方向，對應Boolean類型參數，若是設置了start值，則至關因而設置了element.scrollIntoView(true)，若是設置了end值，則至關因而設置了element.scrollIntoView(false)，